【Webpack 踩坑】CSS加载缓慢
创始人
2024-11-11 21:08:56

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

本意是想要将样式单独打包到一个文件夹,还有压缩css
于是用了mini-css-extract-plugin这个loader(前提要先安装)

// 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,不管是打包文件还是本地运行,加载正常了。

正确配置:
在这里插入图片描述

相关内容

热门资讯

裸辞做“一人公司”,我后悔了 去年这个时候,一位以色列程序员正在东南亚旅行。他顺手把一个在脑子里转了很久的想法做成了产品,一个让任...
南京建成国内首个Pre-6G试... 4月21日,2026全球6G技术与产业生态大会在南京开幕。全息互动技术展台前,一名远在北京的工作人员...
超梵求职受邀参加“2025抖音... 超梵求职受邀参加“2025抖音巨量引擎成人教育行业生态大会”,探讨分享优质内容传播,服务万千学员。 ...
摩托罗拉Razr 2026(R... IT之家 4 月 22 日消息,摩托罗拉宣布新一代 Razr 折叠手机将于 4 月 29 日在美国发...
库克卸任,特纳斯领航:苹果新纪... 苹果首席执行官蒂姆·库克将卸任,硬件工程主管约翰·特纳斯将接任,苹果公司今天宣布此事。 库克将在夏季...