Webpack sass在哪里生成CSS文件？

Question

我正在使用像这样的sass loader与web pack：

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

但我看到样式应用于样式标签，那么生成的CSS文件在哪里？

- user4207046

---

在哪里定义style.scss路径？ - Muneem Habib

Answer 1

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

首先-将您的加载器包装在插件中：

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

然后告诉插件生成的文件应该叫什么：

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

通常情况下，将此文件包含在您的HTML中即可。

- adc

---

请注意，这将禁用热模块替换功能。 - TetraDev

是的，这将禁用热模块替换（HMR），但不要忘记你不需要每次都这样做。你可以只在生产Webpack配置中运行此插件。 - adam-beck

@adc在这种情况下我们真的需要样式加载器吗？它可以只是loader: ExtractTextPlugin.extract("css!sass")。 - angry kiwi

我认为这不是 ExtractText 插件的工作方式，你仍然需要包含 style loader。 - adam-beck

我有一堆scss文件。有没有办法让我从它们创建一堆css文件？ - shicky

@adc 你说在HTML中通常使用include file，但如果我在production模式下使用extractTextPlugin，而在dev模式下使用style-loader，有没有办法在production模式下自动添加<link href="extracted.css">标签？ - Paweł

Answer 2

如果你想在使用Webpack时获取单独的CSS文件，那么你需要使用extract-text-webpack-plugin插件。

- zkhan

Answer 3

extract-text-webpack-plugin已经被弃用，你应该使用mini-css-extract-plugin。假设你的样式在css/app.scss中，你的入口文件应该像往常一样导入它：

import 'css/app.scss';

添加插件：

plugins: [new MiniCssExtractPlugin()]

将插件添加到您的加载器链中：

{
  test: /\.s[ac]ss$/i,
  use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}

当你使用这个配置运行webpack时，你将在HTML中看到一个类似于以下标签的app.css文件被加载：

<link href="app.css" rel="stylesheet">

- Mike Dalrymple