为什么我不能用Webpack编译SASS? [英] Why am I not being able to compile SASS with Webpack?

问题描述

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

I have the following modules in my Webpack config:

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'].

You can see that I am using sass-loader, and for *.scss files I am defining this pipeline: ['style', 'css', 'sass'].

然后我有我的scss文件:

Then I have my scss file:

html {
  height: 100%;
}

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

(...)

最后，我有HTML页面(位于vue.js的VUE文件中)，该页面导入了该scss文件:

Finally I have my HTML page (in a VUE file from vue.js) which imports that scss file:

<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'].

Why is it getting the pipeline wrong? (It appears webpack is trying to process ['css', 'sass', 'style', 'css', 'sass'] instead of just ['style', 'css', 'sass'] as configured in modules.

我在做什么错了?

谢谢！

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

Link to the full example project: https://dl.dropboxusercontent.com/u/1066659/dummy.zip

推荐答案

之所以会这样，是因为Vue会自动为CSS，SASS/SCSS，Stylus生成加载程序配置.

The reason this is happening, is because Vue automatically generates loader configurations for CSS, SASS/SCSS, Stylus.

(请参见projectRoot/build/utils.js行〜10至〜50)

(See projectRoot/build/utils.js lines ~10 through ~50)

因此，您看到此错误，因为您有一个Webpack加载器正在尝试导入文件，然后Vue试图导入(已加载)文件.因此，您可以将您的装载机链视为sass -> css -> style -> sass -> css -> vue-style

So you're seeing the error because you have a webpack loader that is attempting to import the file and then Vue is attempting to import the (already loaded) file. So you can think of your loader chain as sass -> css -> style -> sass -> css -> vue-style

为了解决此问题，您必须摆脱添加的加载程序:

In order to resolve this issue you have to get rid of the loader that you added:

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

并仅依靠提供的加载程序.

and just rely on the provided loader.

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

You can load your stylesheet in one of two ways:

注意:您必须使用scss而不是sass，因为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>

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

Both of these will import the stylesheet, the latter just prevents you from adding any additional styling to the component.

这篇关于为什么我不能用Webpack编译SASS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！