Webpack sass css 文件在哪里

Posted 2023-02-22

【中文标题】Webpack sass css 文件在哪里

【英文标题】：Webpack sass where is the css file

【发布时间】：2015-05-26 10:44:25

【问题描述】：

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

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

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

【问题讨论】：

在哪里定义 style.scss 路径？

【参考方案1】：

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

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

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

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

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

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

【讨论】：

请注意，这会破坏热模块更换功能

是的，这会杀死 HMR，但不要忘记您并不需要每次都这样做。你只能在生产 webpack 配置中运行这个插件。

@adc 在这种情况下我们真的需要样式加载器吗？它可能只是加载器：ExtractTextPlugin.extract("css!sass") ]

我不认为 ExtractText 插件是这样工作的。您仍然需要包含样式加载器。

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

【参考方案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">