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

news2024/10/6 14:38:51

学习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.coloradmin.cn/o/851794.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微星笔记本:为京津冀、黑吉辽受灾用户提供一系列维修服务

面对近期集中在华北、东北等地出现的极端降水,引发洪涝和地质灾害。全国人民都众志成城、万众一心,在各个环节上贡献自己一份力量。台风无情、微星有爱,为保障您的电脑正常使用,京津冀、黑吉辽全区域微星线下服务中心及微星上门服…

day0808

1.单链表实现约瑟夫环 #include "joseph.h" LoopLink list_create(int m) {LoopLink L (LoopLink)malloc(sizeof(Node));if(NULLL){printf("内存创建失败\n");return 0;}LoopLink qL;for(int i1; i<m; i){LoopLink p (LoopLink)malloc(sizeof(Node));…

年轻代频繁GC ParNew导致http变慢

背景介绍 某日下午大约四点多&#xff0c;接到合作方消息&#xff0c;线上环境&#xff0c;我这边维护的某http服务突然大量超时&#xff08;对方超时时间设置为300ms&#xff09;&#xff0c;我迅速到鹰眼平台开启采样&#xff0c;发现该服务平均QPS到了120左右&#xff0c;平…

管理类联考——逻辑——论证逻辑——汇总篇——真题和典例——削弱

削弱 199-2014-10-41——割裂关系 卫计委的报告表明&#xff0c;这些年来医疗保健费的确是增加了。可见&#xff0c;我们每个人享受到的医疗条件大大改善了。 以下哪项对上述结论提出最严重的质疑? A.医疗保健费的绝大部分用在了对高危病人的高技术强化护理上。 B.在不增加费…

容器——4. Map 接口

文章目录 4.1. HashMap 和 Hashtable 的区别4.2. HashMap 和 HashSet 区别4.3. HashMap 和 TreeMap 区别4.4. HashSet 如何检查重复4.5. HashMap 的底层实现4.5.1. JDK1.8 之前4.5.2. JDK1.8 之后 4.6. HashMap 的长度为什么是 2 的幂次方4.7. HashMap 多线程操作导致死循环问题…

STL模型修复权威指南【3D打印】

设计师和工程师通常需要软件来调整、修复和最终确定 3D 打印的 3D 模型。 幸运的是&#xff0c;手动网格编程的时代早已一去不复返了。 推荐&#xff1a;用 NSDT设计器 快速搭建可编程3D场景。 如今&#xff0c;有一系列专用工具可提供自动和手动 STL 修复功能。 自动向导足以满…

zju代码题:4-6

一 分段函数算水费 #include <stdio.h>int main() {/*** 定义两个* 定义浮点型变量* y:水费* x:用水的吨数* */double x, y;printf("Enter x(x>=0):\n"

侯捷 C++ part2 兼谈对象模型笔记——2-xxx-like-classes

2 xxx-like classes 2.1 pointer-like classes 2.1.1 智能指针 设计得像指针class&#xff0c;能有更多的功能&#xff0c;包着一个普通指针指针允许的动作&#xff0c;这个类也要有&#xff0c;其中 *&#xff0c;-> 一般都要重载 template <typename T> class s…

工作中学到三个CSS伪类,直接少些几百行CSS代码~

前言 用最通俗易懂的话讲最难的知识点是我的座右铭&#xff0c;基础是进阶的前提是我的初心。分享一篇好文~ :where 基本使用 :where() CSS 伪类函数接受选择器列表作为它的参数&#xff0c;将会选择所有能被该选择器列表中任何一条规则选中的元素。 以下代码&#xff0c;文…

基于java SpringBoot和Vue零食销售网站设计

随着时代的发展&#xff0c;传统的超市购物方式已经不能满足人们的需求&#xff0c;对于顾客来说&#xff0c;排队购物和支付购物费用的问题亟待解决。对于实体超市来说&#xff0c;他们面临着网上购物的竞争压力&#xff0c;作为超市经理&#xff0c;他们要降低成本&#xff0…

全栈测试平台推荐:RunnerGo

做软件测试的同学在工作时应该都碰到过这种情况&#xff1a;接口管理、接口测试用postman、Apipost等接口管理工具&#xff0c;性能测试用jmeter、loadrunner等性能测试工具&#xff0c;接口自动化则是jmeter脚本或者python脚本配合jenkins使用。这种情况极大的降低了研发效率&…

聚观早报|网信办就人脸识别征求意见;地平线前总监入职比亚迪

【聚观365】8月9日消息 网信办就人脸识别应用征求意见地平线前总监廖杰入职比亚迪理想汽车预计三季度车辆交付量星纪魅族回应终止自研芯片业务上汽集团7月销量同比下滑21% 网信办就人脸识别应用征求意见 据网信中国微信公众号消息&#xff0c;为规范人脸识别技术应用&#xf…

自定义类型——联合

联合 1.联合体的定义 联合也是一种特殊的自定义类型。 先来看一个结构体变量&#xff1a; #include<stdio.h> #include<stdlib.h> union Un {char c;int i; }; int main() {union Un un;printf("%p\n", &un);printf("%p\n", &un.c)…

ad+硬件每日学习十个知识点(26)23.8.6 (DCDC的降压电路、升压电路、降压-升压电路,同步整流,选型考虑同步、隔离)

文章目录 1.DCDC的降压原理2.DCDC的升压原理3.DCDC的升压和降压原理4.什么是肖特基二极管造成的死区电压&#xff1f;5.MOS管有死区电压么&#xff1f;6.DCDC的同步整流&#xff08;用MOS管取代整流二极管&#xff0c;避免死区电压的影响&#xff09;7.DCDC选型——同步与非同步…

怎样学习PMP呢?

大多数人会觉得自己是工作者如果花时间去学习PMP精力上和时间上不好安排&#xff0c;其实上班族也是能学号pmp项目管理的。 首先&#xff0c;我把总结和思维导图打印出来&#xff0c;贴在镜子上&#xff0c;每天早上起来刷牙时&#xff0c;就可以过一遍这些内容。上班路上&…

《golang设计模式》第二部分·结构型模式-01-适配器模式(Adapter)

文章目录 1. 概念1.1 角色1.2 应用场景1.2 类图 2. 代码示例2.1 设计2.2 代码2.3 示例类图 1. 概念 定义一个适配器&#xff0c;帮助原本不能实现接口的类“实现”该接口 1.1 角色 目标&#xff08;Target&#xff09;&#xff1a;客户端调用的目标接口 被适配者&#xff08…

Vue3中v-model在原生元素和自定义组件上的使用

目录 前言 一、原生元素上的用法 1. 输入框(input) 2. 多行文本域(textarea) 3. 单选按钮(radio) 4. 多选框(checkbox) 5. 下拉选择框(select) 二、自定义组件上的用法 1. 定义一个名为 modelValue 的 props 属性和一个名为 update:modelValue 的事件 2.使用一个可…

岩土工程仪器多通道振弦传感器信号转换器应用于桥梁安全监测

岩土工程仪器多通道振弦传感器信号转换器应用于桥梁安全监测 桥梁作为交通运输的重要节点&#xff0c;其安全性一直备受关注。不同于其他建筑物&#xff0c;桥梁所处的环境复杂多变&#xff0c;同时&#xff0c;其所需承受的负荷也相对较大&#xff0c;这就需要对桥梁的安全进…

关于eclipse导入部署具有增删改查的项目

目录 前言&#xff1a;当我们刚刚进入公司的第一步就是去部署当前公司的项目&#xff0c;本博客就是详细介绍怎么去部署当前公司的项目。 一&#xff0c;开发工具&#xff1a; 二&#xff0c;具体步骤&#xff1a; 2.1导入公司的项目 打开eclipse开发工具 2.2配置当前的环…

windows 10 远程桌面配置

1. 修改远程桌面端口&#xff08;3389&#xff09; 打开注册表&#xff08;winr&#xff09;, 输入regedit 找到配置项【计算机\HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Terminal Server\Wds\rdpwd\Tds\tcp】 &#xff0c; 可以通过搜索“Wds”快速定位。 修改端口配…