MorJS cssMinimizerOptions - CSS 压缩选项
2023-11-07 16:14 更新
- 类型:
object
- 默认值:
{}
css 压缩器自定义配置, 使用时请结合 cssMinimizer
所指定的压缩器来配置, 不同的压缩器对应的配置方式不同,参见:
-
cssnano
: https://cssnano.co/ -
csso
: https://github.com/css/csso -
cleanCss
: https://github.com/clean-css/clean-css -
esbuild
: https://esbuild.github.io/api/#minify -
parcelcss
: https://parceljs.org/languages/css/#minification
cssMinimizerOptions 的配置会和 MorJS 内部的配置进行合并,且 cssMinimizerOptions
的优先级更高。
使用 esbuild
压缩 css
注意事项: 👇🏻
-
esbuild
压缩器开启压缩时会默认将 0.5rpx
压缩为 .5rpx
的形式,而由于 .5rpx
的样式压缩写法在支付宝 IDE 中目前(2023.06.26) 不支持,需要使用完整的 0.5rpx
写法,后续支付宝 IDE 产研同学兼容后将自动修复,如遇到类似问题引发的样式显示错误,可添加以下配置以关闭 minifySyntax
进行兼容
{
...otherConfigs,
cssMinimizerOptions: {
minify: false,
minifyWhitespace: true,
minifyIdentifiers: true,
minifySyntax: false,
legalComments: 'inline',
},
}
- 默认情况下 MorJS 配置的
esbuild
压缩 css 选项为 target: ['safari10']
,该 target 下 rgba(0,0,0,0)
会被压缩为 16 进制的 HexRGBA
,参见 ebuild 源代码,部分较老的浏览器下可能会不兼容,解决办法为指定 target: ['safari9']
来解决
{
...otherConfigs,
cssMinimizerOptions: {
target: ['safari9']
},
}
以上内容是否对您有帮助:
更多建议: