Npm Vue文件中的Sass未编译

通过

npm-dev-watch

或

npm-dev-run

编译sass时出错

npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "development"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script 'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     /Users/mike/code/chatroom/npm-debug.log

问题在于我在Chat.vue文件中编写的sass。我对npm这样的前端工具没有太多经验，所以我真的不知道该尝试什么。我试着运行

npm install sass loader node sass webpack——按照这里的说明保存dev

，但是没有什么不同

文件的实际内容与此无关，因为它几乎与.vue文件中的任何样式内容都不相关

<style lang="scss">
    .chat {
        background-color: #fff;
        border: 1px solid #D3E0E9;
        border-radius: 3px;

        &__form {
            border-top: 1px solid #D3E0E9;
            padding: 10px;

            &-input {
                width:
                border: 1px solid #D3E0E9;
                padding: 5px 10px;
                outline: none;
            }

            &-helptext {
                color: #aaa;
            }
        }
    }
</style>

看

npm安装--保存开发sass加载程序样式加载程序css加载程序

---

也许，你还没有安装“样式加载器”和“css加载器”

那么呢？你能发布你的网页配置文件吗？@TinusWagner donemakes没有区别。如果你还没有，['style-loader'、'css loader'、'sass loader'，为.sass和.scss文件添加新规则。如何？我不知道语法。尝试在您的规则下添加SASS/SCSS规则。没有区别

module.exports = {
    module: {
        rules: [
            {
                test: /\.pug$/,
                use: [
                    "pug-loader?self",
                ]
            },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ],
            }
        ]
    }
};

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
      sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
    }
  }
}

{
  test: /\.s(a|c)ss$/,
  use: [
    "style-loader",
    "css-loader",
    "sass-loader"
  ]
}