【Webpack 踩坑】CSS加载缓慢

问题:使用webpack5,单独index.scssassets/css目录下,但是不管是production还是development环境下,都会出现dom加载完后再渲染样式

本意是想要将样式单独打包到一个文件夹,还有压缩css

于是用了mini-css-extract-plugin这个loader(前提要先安装)

javascript 复制代码
// webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
	optimization: {		
        minimizer: [
            new CssMinimizerPlugin(), // 压缩
        ],
    },
	module: {
		rules: [
			{
				test: /\.(scss|sass)$/,
                use: [
                    MiniCssExtractPlugin.loader,	// 提取到一个文件夹
                    "style-loader",
                    "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: () => [
                                    require('autoprefixer')
                                ]
                            }
                        }
                    },
                    'sass-loader'
                ],
			}
		]
	}
}

但是发现这样配置后,样式文件失效了,而且打包文件的样式也没有单独一个文件夹

后面看了一些文章和官网后,试着把style-loader注释,只保留MiniCssExtractPlugin.loader,不管是打包文件还是本地运行,加载正常了。

正确配置:

相关推荐
西洼工作室7 小时前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
天蓝色的鱼鱼8 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack
软件技术NINI8 小时前
html css js网页制作成品——化妆品html+css+js (7页)附源码
javascript·css·html
前端Hardy11 小时前
HTML&CSS:一眼心动的 SVG 时钟
前端·javascript·css
TTGGGFF11 小时前
Streamlit:CSS——从基础到实战美化应用
前端·css
Hilaku12 小时前
重新思考CSS Reset:normalize.css vs reset.css vs remedy.css,在2025年该如何选?
前端·css·代码规范
alwaysrun12 小时前
Rust中的特征Trait
rust·trait·impl trait·dyn trait·派生特征
为java加瓦12 小时前
Rust 的类型自动解引用:隐藏在人体工学设计中的魔法
java·服务器·rust
Darenm11113 小时前
深入理解CSS BFC:块级格式化上下文
前端·css
小白640214 小时前
前端梳理体系从常问问题去完善-框架篇(react生态)
前端·css·html·reactjs