javascript - Webpack sass css 文件在哪里

Question

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

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 中。