带有 sass-loader 的 mini-css-extract-plugin 不输出 CSS 文件

Posted 2023-02-22

【中文标题】带有 sass-loader 的 mini-css-extract-plugin 不输出 CSS 文件

【英文标题】：mini-css-extract-plugin with sass-loader doesn't output a CSS file

【发布时间】：2021-04-12 13:13:51

【问题描述】：

我正在使用 Webpack 来捆绑我的 React + Typescript 应用程序并希望使用 SASS 进行样式设置。我可以像这样使用 sass-loader、css-loader 和 style-loader 添加 SASS 编译和包含样式：

rules: [
    ...,
    
        test: /\.(scss|css)$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
       
]

但是，我现在想添加 mini-css-extract-plugin 以将编译后的 CSS 提取到单独的文件中，但我无法让它工作：

plugins: [
    new MiniCssExtractPlugin(
        filename: 'main.css',
    )
],
...,
rules: [
    ...,
    
        test: /\.(scss|css)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
       
]

我没有收到任何错误，但我没有看到任何名为 main.css 的文件正在创建。我如何让它发挥作用？

asset bundle.js 274 KiB [emitted] [minimized] [big] (name: main) 1 
related asset
asset main.css 107 bytes [emitted] (name: main)
Entrypoint main [big] 274 KiB = main.css 107 bytes bundle.js 274 KiB
runtime modules 1000 bytes 5 modules
orphan modules 769 bytes [orphan] 4 modules
cacheable modules 468 KiB
  modules by path ./node_modules/webpack-dev-server/ 21.2 KiB 12 modules
  modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
  modules by path ./node_modules/react/ 6.48 KiB 2 modules
  modules by path ./node_modules/react-dom/ 119 KiB 2 modules
  modules by path ./node_modules/webpack/hot/*.js 1.42 KiB 2 modules
  modules by path ./node_modules/scheduler/ 4.91 KiB
    ./node_modules/scheduler/index.js 198 bytes [built] [code generated]
    ./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB         
[built] [code generated]
./node_modules/webpack/hot/ sync nonrecursive ^\.\/log$ 170 bytes             [built] [code generated]
css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Style/Main.scss 106 bytes [code generated]

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  bundle.js (274 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (274 KiB)
      main.css
      bundle.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.11.0 compiled with 3 warnings in 7223 ms
ℹ ｢wdm｣: Compiled with warnings.

【问题讨论】：

你能分享你最小的可重现回购吗？

是的，这里是最小形式的 repo，在开发分支中进行了所有更改：github.com/Commercify/react-webshop-uitkit

【参考方案1】：

问题是您错过了将主 css 文件包含到 webpack 入口点中，因此找不到 css 文件。

只要你导入你的主css文件，它就可以工作：

index.tsx

import "./Style/Main.scss";

【讨论】：

我刚做了，还是一样的问题。我将 Webpack CLI 输出添加到我的问题中，也许您可​​以在那里看到问题，因为我看到提到了 main.css 文件。

你的意思是你没有看到生成的main.css文件或其他什么？

啊，我现在意识到我正在使用 Webpack 开发服务器，所以这些文件在我机器的文件系统上不可见，但它们可以包含在项目中并使用。看来问题已经解决了，谢谢