为什么是网页包';s sass加载器在生产模式下最小化CSS?
我正在为为什么是网页包';s sass加载器在生产模式下最小化CSS?,css,webpack,sass-loader,Css,Webpack,Sass Loader,我正在为.css和.scss文件设置网页包加载程序配置,我注意到当使用--模式生产时,我将最小化css作为最终输出,甚至没有明确使用最小化程序,以下是我的加载程序配置: { //匹配.css或.scss 测试:/\.s?css$/,, 使用:[ 伊斯普罗德 //在生产中,将CSS提取到单独的文件中 ? { 加载器:MiniCssExtractPlugin.loader, 选项:{ hmr:!isProd } } //在开发中,将样式注入DOM :“样式加载器”, { 加载器:“css加载器” }
.css
和.scss
文件设置网页包加载程序配置,我注意到当使用--模式生产时,我将最小化css作为最终输出,甚至没有明确使用最小化程序,以下是我的加载程序配置:
{
//匹配.css或.scss
测试:/\.s?css$/,,
使用:[
伊斯普罗德
//在生产中,将CSS提取到单独的文件中
? {
加载器:MiniCssExtractPlugin.loader,
选项:{
hmr:!isProd
}
}
//在开发中,将样式注入DOM
:“样式加载器”,
{
加载器:“css加载器”
},
{
加载器:“sass加载器”,
选项:{
sourceMap:false
}
}
]
}
我正在使用sass加载器和节点sass
和迷你css提取插件
将css提取到单独的文件中,这建议使用优化css资产网页包插件
通过覆盖优化来最小化css。minimizer
,但是我已经在不安装这个插件的情况下获得了最小化的输出
为了找到导致这种行为的原因,我尝试使用和不使用sass加载程序处理CSS文件,发现sass加载程序可能导致这种行为,但它没有任何选项来最小化CSS
那么是什么导致了这种行为呢?如果我的css文件被最小化,我是否还需要优化css资产网页包插件
默认情况下,webpack v4+将在生产模式下缩小您的代码
因此,并不是sass加载程序进行缩小,只是删除webpack意味着没有将scs处理为CSS,因此没有创建要缩小的文件
我想说,如果您对简单的缩小感到满意,那么默认值可能适合生产。其他工具可以让您更好地控制最终输出,包括源映射、删除重复规则、转储旧前缀等。sass加载程序选项中的选项outputStyle决定最终CSS样式的输出格式。
默认值:嵌套。
有关详细信息,请参见
要禁用缩小功能,请将此选项设置为“扩展”:
{
loader: 'sass-loader',
options: {
sassOptions: {
outputStyle: 'expanded'
}
}
}
对于minify css i reccomend插件css nano
。它的设置非常灵活。使用postss加载器
很好