为什么我无法使用 Webpack 编译 SASS？

Question

我的 Webpack 配置中有以下模块：

module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.html$/,
        loader: 'vue-html'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },

你可以看到我正在使用 sass-loader，对于 *.scss 文件我正在定义这个管道：['style', 'css', 'sass'].

然后我有我的 scss 文件：

html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

(...)

我终于有了我的 HTML 页面（在来自 vue.js 的 VUE 文件中），它导入了那个 scss 文件：

<script>

require('./styles/main.scss')

(...)

</script>

但是我在启动项目时不知何故遇到了这个错误：

ERROR in ./~/css-loader!./~/sass-loader!./~/style-loader!./~/css-loader!./~/sass-loader!./src/styles/main.scss
Module build failed:
html {
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/td/uprank/src/styles/main.scss (line 1, column 1)
 @ ./src/styles/main.scss 4:14-247 13:2-17:4 14:20-253

为什么管道出错了？（看起来 webpack 正在尝试处理 ['css', 'sass', 'style', 'css', 'sass'] 而不是模块中配置的 ['style', 'css', 'sass']。

我做错了什么？

谢谢！

编辑： Link 到完整的示例项目：https://dl.dropboxusercontent.com/u/1066659/dummy.zip

Answer 1

发生这种情况的原因是 Vue 自动为 CSS、SASS/SCSS、Stylus 生成加载器配置。

（参见 projectRoot/build/utils.js 行 ~10 到 ~50）

所以您看到错误是因为您有一个 webpack 加载程序正在尝试导入文件，然后 Vue 正在尝试导入（已加载的）文件。所以你可以把你的加载器链想象成 sass -> css -> style -> sass -> css -> vue-style

为了解决这个问题，您必须删除您添加的加载程序：

{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
},

并且只依赖提供的加载程序。

您可以通过以下两种方式之一加载样式表：

NOTE: You MUST use scss instead of sass, as sass will attempt to parse your stylesheet using the indented syntax instead of the bracket syntax.

1:

<style lang="scss">
  @import './styles/main.scss
</style>

2:

<style src="./styles/main.scss"></style>

这两个都将导入样式表，后者只是阻止您向组件添加任何其他样式。

为什么我无法使用 Webpack 编译 SASS？

Why am I not being able to compile SASS with Webpack?

webpack

vue.js

webpack-dev-server

webpack-style-loader

sass-loader