时间戳

首页 > 解决方案 > 带有 sass-loader 的 mini-css-extract-plugin 不输出 CSS 文件

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

问题描述

我正在使用 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.

标签： csswebpacksass

解决方案

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

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

index.tsx

import "./Style/Main.scss";

推荐阅读