Sass 样式表未加载 - webpack答案

【问题标题】：Sass stylesheet is not being loaded - webpackSass 样式表未加载 - webpack
【发布时间】：2017-01-07 12:21:17
【问题描述】：

我有一个导入其他样式表的 style.scss 文件。我想要实现的是

在我的页面上加载样式
观察所有样式表文件上的任何更改，并在浏览器上实时反映（无需单击刷新按钮）。

我正在使用 webpack-dev-server 来提供文件。但是我看不到应用于我的页面的样式。

这是我在 webpack 配置中的加载器：

modules: {
      loaders: [ 
          {
             test: /\.scss$/,
             loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader")
          }
      ]
},
plugin: [
    new ExtractTextPlugin('styles.css')
]

在我的入口点文件 main.js 中有

require('../scss/style.scss');

当我运行 webpack 时，style.css 被正确创建。但是，当我使用 webpack-dev-server 运行应用程序时，我看不到应用的样式。

你可以在Github找到代码

有人可以帮忙找出问题所在吗？

【问题讨论】：

你在加载器中使用了 ExtractTextPlugin，所以我认为你不需要在插件中声明它。我正在克隆你的 repo 来查看。
@MrJSingh 不胜感激

标签： sass styles webpack

【解决方案1】：

我通过从插件中删除“ExtractTextPlugin”并更改加载器来解决它

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

这适用于开发。对于 prod，我仍然需要 ExtractTextPlugin 来创建 styles.css

【讨论】：

是的，我昨天注意到了，但我没有时间与您分享。我认为 ExtractTextPlugin 存在问题，但我看到很多人在使用它，所以它必须使用较新的版本。