Vue文件中的Sass未编译

Question

通过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 之类的前端工具没有那么丰富的经验，所以我真的不知道该尝试什么。我尝试按照此处 (https://github.com/vuejs/vue-loader/issues/363) 的说明运行 npm install sass-loader node-sass webpack --save-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 版本 3.10.10 节点版本 6.9.5

我的 webpack-dev-server/client/webpack.config.js 文件如下；

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

Answer 1

见https://vue-loader.vuejs.org/en/configurations/pre-processors.html

{
  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">
    }
  }
}

还包括一个 SCSS 规则

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

Answer 2

npm install --save-dev sass-loader style-loader css-loader

也许，你还没有安装'style-loader'和'css-loader'