为什么我不能使用Webpack编译SASS？

Question

为什么我不能使用Webpack编译SASS？

webpackvue.jswebpack-dev-serverwebpack-style-loadersass-loader

29

我在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'] 。）
我做错了什么？
谢谢！
编辑：完整示例项目的链接：https://dl.dropboxusercontent.com/u/1066659/dummy.zip

- PedroD

require('./styles/main.scss') 不应该出现在 <script> 标签内。相反，它应该使用 Sass 导入语法放置在 <style lang="sass"></style> 中。 - Raj Kamal

现在编译没有显示错误。然而，CSS未呈现在生成的页面中（即未包含在HTML中）。 - PedroD

我添加了一个链接到完整的项目。 - PedroD

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Taylor Glaeser · Accepted Answer

出现这种情况的原因是Vue会自动生成CSS、SASS/SCSS、Stylus的loader配置。

(请参考projectRoot/build/utils.js的第10~50行)

所以你看到这个错误是因为你有一个webpack loader试图去导入文件，然后Vue也试图去导入（已经加载的）文件。因此，你可以把你的loader链看作是sass -> css -> style -> sass -> css -> vue-style。

为了解决这个问题，你需要删除你添加的loader：

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

只需使用提供的加载器即可。

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

注意：必须使用 scss 而不是 sass，因为 sass 将尝试使用缩进语法而不是括号语法解析您的样式表。

1：

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

2:

->

2：

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

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