Webpack sass css 文件在哪里答案

【问题标题】：Webpack sass where is the css fileWebpack sass css 文件在哪里
【发布时间】：2015-05-26 10:44:25
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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">

【讨论】：