Webpack sass css文件在哪里

神无逆天2020-03-18

我正在将Web Pack与Sass loader一起使用，如下所示：

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: "style!css!sass"
      }
    ]
  }
};

但是我看到样式适用于样式标签，生成css文件在哪里？

神无西里2020/03/18 18:26:04

默认情况下，样式加载器将已编译的CSS内联到您的包中，该包与输出文件（例如）一起添加到页面的开头bundle.js。使用extract-text-webpack-plugin可以从捆绑软件中删除已编译的CSS，并将其导出到单独的文件中。

首先-将加载程序包装在插件中：

 loaders: [{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract(
    "style",
    "css!sass")
 }]
},

然后告诉插件如何调用它生成的文件：

plugins: [
    new ExtractTextPlugin("app.css")
 ]

通常将此文件包含在HTML中。

番长猿阳光2020/03/18 18:26:04

如果在使用Webpack时需要单独的CSS文件，则需要使用extract-text-webpack-plugin。

Newest Answer