Webpack sass在哪里是css文件

Question

我正在使用带有sass加载器的web包,如下所示:

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

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

Answer 1

默认情况下,样式加载器将已编译的css内联到您的包中,该包添加到页面的头部,并带有输出文件,例如bundle.js.使用extract-text-webpack-plugin,您可以从包中删除已编译的css,并将其导出到单独的文件中.

首先 - 在插件中包装你的加载器:

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

然后告诉插件要调用它生成的文件:

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

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

Answer 2

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