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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/74877.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vscode的配置和使用

1.侧边栏调整大小 放大:View -> Appearance -> Zoom in(快捷键Ctrl ) 缩小:View -> Appearance -> Zoom out(快捷键Ctrl -) 侧边栏字体调整到合适大小后,可以按下一步调整代码区…

MFC创建和使用OCX控件

文章目录 MFC建立OCX控件注册OCX控件与反注册使用Internet Explorer测试ocx控件OCX控件添加方法OCX控件添加事件Web使用OCX控件MFC使用OCX控件使用OCX控件调用ocx的功能函数对ocx的事件响应OCX控件调试工具tstcon32.exe加载ocx控件使用tstcon32.exe调试ocxMFC建立OCX控件 新建…

[HDLBits] Exams/m2014 q4c

Implement the following circuit: module top_module (input clk,input d, input r, // synchronous resetoutput q);always(posedge clk) beginif(r) q<1b0;elseq<d;end endmodule

springboot第35集:微服务与flutter安卓App开发

Google Playplay.google.com/apps/publis…[1]应用宝open.qq.com/[2]百度手机助手app.baidu.com/[3]360 手机助手dev.360.cn/[4]vivo 应用商店dev.vivo.com.cn/[5]OPPO 软件商店&#xff08;一加&#xff09;open.oppomobile.com/[6]小米应用商店dev.mi.com/[7]华为应用市场dev…

TX Text Control .NET Server for ASP.NET Crack

TX Text Control .NET Server for ASP.NET Crack TX Text Control.NET Server for ASP.NET是用于Web应用程序或服务的服务器端组件。它是一个完全可编程的ASP.NET文字处理引擎&#xff0c;提供了广泛的文字处理功能。使用TX Text Control.NET Server&#xff0c;程序员可以开发…

数据库内日期类型数据大于小于条件查找注意事项

只传date格式的日期取查datetime的字段的话默认是 00:00:00 日期类型字符串需要使用 ’ ’ 单引号括住 使用大于小于条件查询某一天的日期数据 前后判断条件不能是同一天 一个例子 数据库内数据&#xff1a; 查询2023-08-14之后的数据&#xff1a; select * from tetst…

2023牛客暑期多校训练营9-J Puzzle: Star Battle

2023牛客暑期多校训练营9-J Puzzle: Star Battle https://ac.nowcoder.com/acm/contest/57363/J 文章目录 2023牛客暑期多校训练营9-J Puzzle: Star Battle题意解题思路代码 题意 解题思路 出题人都说是诈骗题&#xff08;&#xff0c;可以发现满足每行每列恰好有 n n n个星…

React+Typescript清理项目环境

上文 创建一个 ReactTypescript 项目 我们创建出了一个 React配合Ts开发的项目环境 那么 本文 我们先将环境清理感觉 方便后续开发 我们先来聊一下React的一个目录结构 跟我们之前开发的React项目还是有一些区别 public 主要是存放一些静态资源文件 例如 html 图片 icon之类的 …

Leaflet入门,Leaflet如何自定义版权信息,以vue2-leaflet修改自定义版权为例

前言 本章讲解使用Leaflet的vue2-leaflet或者vue-leaflet插件来实现自定义版权信息的功能。 # 实现效果演示 见图片右下角版权信息 vue如何使用Leaflet vue2如何使用:《Leaflet入门,如何使用vue2-leaflet实现vue2双向绑定式的使用Leaflet地图,以及初始化后拿到leaflet对象…

安全加密框架图——Oracle安全开发者

Oracle安全开发者 ACLs 设计 ACLs&#xff08;访问控制列表&#xff09;时&#xff0c;可以根据以下思路进行设计&#xff1a; 所有者文件权限&#xff1a;确定文件的所有者能够对文件执行哪些操作&#xff0c;如读取、写入、执行等。这可以根据文件的性质和拥有者的职责来决…

安装istio和部署实例以及仪表盘

安装Istio 接下来我们将介绍如何在 Kubernetes 集群中安装 Istio&#xff0c;这里我们使用的是最新的 1.10.3 版本。 下面的命令可以下载指定的 1.10.3 版本的 Istio: ➜ ~ curl -L https://istio.io/downloadIstio | ISTIO_VERSION1.10.3 sh -如果安装失败&#xff0c;可以…

Linux命令200例:date用于显示和设置系统的日期和时间

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…

gearman使用心得

gearman基础 工作原理 部署架构 本质上&#xff0c;gearman可以认为是一个分布式任务队列&#xff0c;client是生产者&#xff0c;worker则是消费者。gearman并不主动分发任务&#xff0c;而是由worker到它那里去取任务执行&#xff0c;所以它采用的是类似kafka的pull消费模式…

自然语言处理: 第八章chatGPT的搭建

理论基础 Transformer 大模型家族可以分成三类, 至于三者的区别可以参考上一章: Encoder-only,Decoder-only, 只需要Pre_trainEncoder-decoder , 可以在一些任务上无需进行fine_tune 必须要在下游任务进行微调比如Bert &#xff0c; Bart 。 T5 这种无需要微调就能完成一些任…

Mr. Cappuccino的第62杯咖啡——Spring之Bean的生命周期

Spring之Bean的生命周期 Aware接口项目结构项目代码运行结果源代码使用场景 InitializingBean接口项目结构项目代码运行结果源代码 BeanFactoryPostProcessor接口项目结构项目代码运行结果源代码 Bean的生命周期项目结构项目代码运行结果源代码 Aware接口 实现Aware接口是为了…

全新 – Amazon EC2 M1 Mac 实例

去年&#xff0c;在 re: Invent 2021 大会期间&#xff0c;我写了一篇博客文章&#xff0c;宣布推出 EC2 M1 Mac 实例的预览版。我知道你们当中许多人请求访问预览版&#xff0c;我们尽了最大努力&#xff0c;却无法让所有人满意。不过&#xff0c;大家现在已经无需等待了。我很…

用身边统计学告诉大家ChatGPT听闻过的、用过的、重度使用的大概有多少?

最近摸鱼时&#xff0c;看到有人发帖说信息茧房真的是无处不在。讨论一番后&#xff0c;确实是这样&#xff0c;每个人都在不同程度的“坐井观天”罢了。拿最近火遍全球的ChatGPT来说&#xff0c;身边真的不少人听都没听过。这里有个更详细调查&#xff0c;不过是Sunergia做的&…

Python Opencv实践 - 图像放射变换

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg cv.imread("../SampleImages/pomeranian.png", cv.IMREAD_COLOR) rows,cols img.shape[:2] print(img.shape[:2])#使用getAffineTransform来获得仿射变换的矩阵M #cv.getAffineTransform(…

用js快速生成一个简单的css原子库 例如: .mr-18 .pl-18

第三方css原子库的缺点 比如 tailwindcss&#xff0c;有学习成本最开始写的时候效率可能还没有我们自己手写效率高&#xff0c;需要配置&#xff0c;会有原始样式被覆盖的问题&#xff1b;总之就是一个字重 自己搓的优点 学习成本低灵活不会有副作用 <!DOCTYPE html>…

【Rust】Rust学习 第十三章Rust 中的函数式语言功能:迭代器与闭包

Rust 的设计灵感来源于很多现存的语言和技术。其中一个显著的影响就是 函数式编程&#xff08;functional programming&#xff09;。函数式编程风格通常包含将函数作为参数值或其他函数的返回值、将函数赋值给变量以供之后执行等等。 更具体的&#xff0c;我们将要涉及&#…