Webpack sass css 文件在哪里

Question

我正在使用带有 sass 加载程序的 Web 包，如下所示：

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

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

Answer 1

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

Answer 2

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

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

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

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

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

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

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">

Webpack sass where is the css file