当前位置: 首页 > news >正文

Webpack 的 sass-loader 在生产模式下最小化 CSS 问题

学习webpack时候我发现一个问题:
将mode 改为production模式后,生成的css会被压缩了,但是我并没有引入CssMinimizerPlugin插件,然后我试着将optimization.minimize 设置为false,测试是否为webpack自带的压缩,但是设置为false还是可以进行压缩,所以我觉得应该是某个loader 进行了压缩,
然后我试了引入scss 和css发现是scss-loader的问题
下面两个body样式,一个是使用到scss-loader 的scss文件
下面那个是没有使用到scss-loader 的css文件编写的样式
在这里插入图片描述

查找资料

sass-loader options中的option outputStyle决定了最终CSS样式的输出格式。
默认:nested。
更多详情https://github.com/sass/node-sass#outputstyle
要禁用缩小,请将此选项设置为 expanded:

{loader: 'sass-loader',options: {sassOptions: {outputStyle: 'expanded'}}
}

关闭之后,如果想使用其他压缩方式,可以在optimization 配置对应插件,需要将minimize设置为true,否则不生效。

  optimization: {runtimeChunk: 'single',splitChunks: {chunks: 'all',},minimizer: [new CssMinimizerPlugin(),],// 默认是在生产环境才自动开启的,如果在开发环境也开启则手动开启minimize: false},

另外提醒一个:css 后缀和 scss 后缀的可以统一用跟scss 一样的loader,处理scss的也可以处理css

http://www.lryc.cn/news/125090.html

相关文章:

  • pytest自动化测试框架tep环境变量、fixtures、用例三者之间的关系
  • vue自定义穿梭框支持远程滚动加载
  • TCP 协议十大相关特性总结
  • 文档控件DevExpress Office File API v23.1新版亮点 - 支持.NET MAUI
  • 分割字符串的最大得分
  • ASR 语音识别接口封装和分析
  • C 语言的 ctype.h 头文件
  • Linux系统编程:采用管道的方式实现进程间通信
  • 网络安全面试题
  • 如何成为游戏主程
  • SSM整合(XML方式)
  • 学习Vue:列表渲染(v-for)
  • 使用巴特沃兹滤波器的1D零相位频率滤波研究(Matlab代码实现)
  • ubuntu18.04安装cuda
  • 【MFC】09.MFC视图-笔记
  • 【字节跳动青训营】后端笔记整理-2 | Go实践记录:猜谜游戏,在线词典,Socks5代理服务器
  • GPT的第一个创作
  • Spring Boot 获取前端参数
  • java应用运行在docker,并且其他组件也在docker
  • Java真实面试题,offer已到手
  • 在序列化、反序列化下如何保持单例(Singleton)模式
  • 【数据结构】二叉树篇|超清晰图解和详解:二叉树的最近公共祖先
  • android ndk clang交叉编译ffmpeg动态库踩坑
  • 简单记录牛客top101算法题(初级题C语言实现)BM24 二叉树的中序遍历 BM28 二叉树的最大深度 BM29 二叉树中和为某一值的路径
  • 前后端分离------后端创建笔记(05)用户列表查询接口(上)
  • 性能测试|App性能测试需要关注的指标
  • Termux SFTP 进行远程文件传输
  • Sqlite3简介
  • K8S调度
  • vue+element多层表单校验prop和rules