当前位置: 首页 > 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

相关文章:

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

学习webpack时候我发现一个问题: 将mode 改为production模式后,生成的css会被压缩了,但是我并没有引入CssMinimizerPlugin插件,然后我试着将optimization.minimize 设置为false,测试是否为webpack自带的压缩&#xff0…...

pytest自动化测试框架tep环境变量、fixtures、用例三者之间的关系

tep是一款测试工具,在pytest测试框架基础上集成了第三方包,提供项目脚手架,帮助以写Python代码方式,快速实现自动化项目落地。 在tep项目中,自动化测试用例都是放到tests目录下的,每个.py文件相互独立&…...

vue自定义穿梭框支持远程滚动加载

分享-2023年资深前端进阶:前端登顶之巅-最全面的前端知识点梳理总结,前端之巅 *分享一个使用比较久的🪜 技术框架公司的选型(老项目):vue2 iview-ui 方案的实现思路是共性的,展现UI样式需要你们自定义进行更改&#…...

TCP 协议十大相关特性总结

目录 一、TCP特性 二、报文格式 TCP十大核心特性 1. 确认应答 2. 超时重传 3. 连接管理(三次握手,四次挥手) 三次握手 四次挥手 4. 滑动窗口 情况一:接收方的ACK丢失 情况二:发送方的数据包丢失 5. 流量控制 6. 拥塞控制 7. 延迟应答 8. 捎带应答 9. 字节流粘包问题 10. TCP的…...

文档控件DevExpress Office File API v23.1新版亮点 - 支持.NET MAUI

DevExpress Office File API是一个专为C#, VB.NET 和 ASP.NET等开发人员提供的非可视化.NET库。有了这个库,不用安装Microsoft Office,就可以完全自动处理Excel、Word等文档。开发人员使用一个非常易于操作的API就可以生成XLS, XLSx, DOC, DOCx, RTF, CS…...

分割字符串的最大得分

题目: 给你一个由若干 0 和 1 组成的字符串 s ,请你计算并返回将该字符串分割成两个 非空 子字符串(即 左 子字符串和 右 子字符串)所能获得的最大得分。 「分割字符串的得分」为 左 子字符串中 0 的数量加上 右 子字符串中 1 的…...

ASR 语音识别接口封装和分析

这个文档主要是介绍一下我自己封装了 6 家厂商的短语音识别和实时流语音识别接口的一个包,以及对这些接口的一个对比。分别是,阿里,快商通,百度,腾讯,科大,字节。 zxmfke/asrfactory (github.c…...

C 语言的 ctype.h 头文件

C 语言的 ctype.h 头文件包含了很多字符函数的函数原型, 可以专门用来处理一个字符, 这些函数都以一个字符作为实参. ctype.h 中的字符测试函数如表所示: 这些测试函数返回 0 或 1, 即 false 或 true. ctype.h 中的字符映射函数如表所示: 字符测试函数不会修改原始实参, 只会…...

Linux系统编程:采用管道的方式实现进程间通信

目录 一. 进程间通信概述 二. 管道的概念 三. 通过管道实现进程间通信 3.1 实现原理 3.2 匿名管道创建系统接口pipe 3.3 管道通信的模拟实现 3.4 管道通信的访问控制规则 3.5 管道通信的特点 四. 通过匿名管道实现进程池 4.1 进程池的概念 4.2 进程池的模拟实现 五…...

网络安全面试题

什么是SQL注入攻击 SQL 注入攻击是一种常见的 Web 应用程序安全漏洞,攻击者通过在 Web 应用程序的输入框、搜索框、登陆框等地方注入恶意的 SQL 语句,从而获取未授权的访问权限或者窃取敏感数据。攻击者利用注入的 SQL 语句执行恶意操作,例如…...

如何成为游戏主程

前言 前段时间有人在知乎上提问,如何成为主程,技术毋庸置疑是最重要的,但很多事情我认为主要是要有思路和品位。 1、技术 1、技术是程序员吃饭的手艺,打磨自己的手艺肯定无可厚非 2、保持对技术的热爱,不断学习&…...

SSM整合(XML方式)

文章目录 SSM整合之后xml方式1 系统环境1.1 软件环境1.2 项目环境1.3 配置web.xml1.4 配置jdbc.properties文件1.5 配置SpringMVC核心文件1.6 配置Spring的核心文件1.7 配置MyBatis的核心文件1.8 配置数据库1.9 配置文件位置 2 编写后端代码2.1 编写实体类2.2 编写Dao接口2.3 编…...

学习Vue:列表渲染(v-for)

在 Vue.js 中,实现动态列表的显示是非常常见的需求。为了达到这个目的,Vue 提供了 v-for 指令,它允许您迭代一个数组或对象,将其元素渲染为列表。然而,在使用 v-for 时,key 属性的设置也非常重要&#xff0…...

使用巴特沃兹滤波器的1D零相位频率滤波研究(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...

ubuntu18.04安装cuda

卸载之前安装的驱动 sudo apt-get purge nvidia*安装驱动 方法1: 查看显卡适配的NVIDIA的驱动 ubuntu-drivers devices安装recommend推荐的版本 sudo apt-get install nvidia-driver-455方法2: 或者直接使用下面命令安装 sudo ubuntu-drivers au…...

【MFC】09.MFC视图-笔记

MFC视图窗口:CView类 显示数据/画面 我们之前的绘图消息,都是在框架类上画出来的 视图窗口就覆盖在框架窗口上 视图窗口本质上也是窗口,只是和框架窗口风格不同 CView类也继承于CWnd类 CView也能处理消息,因为它继承于CWnd类…...

【字节跳动青训营】后端笔记整理-2 | Go实践记录:猜谜游戏,在线词典,Socks5代理服务器

**本人是第六届字节跳动青训营(后端组)的成员。本文由博主本人整理自该营的日常学习实践,首发于稀土掘金:🔗Go实践记录:猜谜游戏,在线词典,Socks5代理服务器 | 青训营 我的go开发环境…...

GPT的第一个创作

嗨,大家好,我是赖兴泳!今天,我要和大家聊一聊前端开发,就像我用音符创造音乐一样,前端开发也是创造美丽的用户界面的过程。 前端开发是构建网站和应用程序用户界面的关键部分。就像音乐家需要精心编排音符…...

Spring Boot 获取前端参数

Spring Boot 获取前端参数 在开发 Web 应用程序时,前端参数是非常重要的。Spring Boot 提供了多种方法来获取前端参数,本文将介绍其中的一些常用方法。 1. 使用 RequestParam 注解 RequestParam 注解是 Spring MVC 提供的一种常用方式,用于…...

java应用运行在docker,并且其他组件也在docker

docker启动redis容器 # create redis docker run -d --name redis-container -p 6379:6379 redis:latest创建java 应用 dockerfile FROM openjdk:17##Pre-create related directories RUN mkdir -p /data/etax/ms-app WORKDIR /data/etax/ms-appEXPOSE 10133 COPY ./target…...

Phi-3 Forest Lab应用场景:科研人员实验设计思路启发助手

Phi-3 Forest Lab应用场景:科研人员实验设计思路启发助手 1. 引言:当科研思路遇到“森林智者” 你有没有过这样的时刻?面对一个全新的研究课题,实验方案想了三天三夜,却总觉得思路打不开,或者陷入了某个细…...

Youtu-VL-4B-Instruct效果展示:高清OCR+精准Box定位+多轮图文对话作品集

Youtu-VL-4B-Instruct效果展示:高清OCR精准Box定位多轮图文对话作品集 1. 引言:当“看图说话”进化成“看图办事” 你有没有遇到过这种情况?看到一张复杂的图表,想快速提取里面的数据,却要手动一个个去数&#xff1b…...

像素剧本圣殿惊艳效果:深紫+荧光绿UI中生成的古装剧场景描述高清截图

像素剧本圣殿惊艳效果:深紫荧光绿UI中生成的古装剧场景描述高清截图 1. 视觉震撼:当复古像素美学遇上AI剧本创作 在数字创作工具同质化严重的今天,像素剧本圣殿以其独特的视觉风格脱颖而出。这款基于Qwen2.5-14B-Instruct深度微调的专业剧本…...

Istio Gateway+VirtualService配置不生效?Java服务流量劫持失败的6大隐性原因深度诊断

第一章:Istio GatewayVirtualService配置不生效?Java服务流量劫持失败的6大隐性原因深度诊断Istio 的 Gateway 与 VirtualService 是实现南北向流量治理的核心资源,但 Java 应用在启用 Istio Sidecar 注入后,常出现请求未被 Envoy…...

定制属于自己的AS-I总线

本公司自己已经完成AS-I总线主站、电源、从站模块的纯国产化,可以基于AS-I总线的基础上进行拓展,欢迎有需求的、有想法的各类人士一起撑起AS-I国产化一片天...

基于GA - XGBoost的时间序列预测:抑制过拟合与参数优化

基于遗传算法优化算法优化XGBoost(GA-XGBoost)的时间序列预测 GA-XGBoost时间序列 采用交叉验证抑制过拟合问题 优化参数为迭代次数、最大深度和学习率 matlab代码,注:暂无Matlab版本要求 -- 推荐 2016B 版本及以上 注:采用 XGBoost 工具箱&a…...

第一次训练周赛I题分析

这题来解决的话需要我们思考怎么才能排序最多个,那么我们知道_是需要一个的,-是需要两个的,那么我们就让-放在_的左右边来排序试试呢?那么要是放在左右边左右各放多少呢?那不如就试试平均分配呢?那么想到这…...

ECharts折线图入门学习:从基础到实战的完整指南

引言 折线图是数据可视化中最常用的图表类型之一,特别适合展示数据随时间变化的趋势。ECharts作为一款功能强大的JavaScript可视化库,提供了丰富的配置选项和交互功能,能够轻松创建出专业、美观的折线图。本文将带领大家从零开始学习ECharts折…...

别再手动标图了!用CVAT和YOLOv5搭建半自动标注流水线(保姆级避坑指南)

从零构建CVATYOLOv5半自动标注系统:工程化实践与效率革命 标注数据是AI开发中最耗时却无法绕过的环节。我曾为一个客户项目标注3万张工业零件图像,团队3人整整耗费两周——直到发现CVAT与训练好的YOLOv5模型结合,能将效率提升400%。本文将分…...

永磁同步电机矢量控制仿真避坑指南:从PI参数整定到SVPWM模块优化

永磁同步电机矢量控制仿真避坑指南:从PI参数整定到SVPWM模块优化 在工业自动化和电力驱动领域,永磁同步电机(PMSM)凭借其高效率、高功率密度和优异的动态性能,已成为众多应用场景的首选。然而,要实现PMSM的…...