Question

我有一个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

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

Answer 1

我通过删除＆＃34; ExtractTextPlugin＆＃34;解决了这个问题。从插件和更换装载机

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

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

没有加载Sass样式表 - webpack

1 个答案: