【Webpack4】CSS 配置之 postcss-loader

如题所述

第1个回答  2022-06-13

postcss-loader 应该是 Webpack 配置中不可或缺的一个 CSS loader。它负责进一步处理 CSS 文件,比如添加浏览器前缀,压缩 CSS 等。

配置 postcss-loader 时,可以在 webpack.config.js 中配置具体选项,也可以新建一个 postcss.config.js ,专门定义 postcss-loader 的配置。

这篇文档基于依赖包版本:

推荐使用文件 postcss.config.js 的方式:

env 取值 process.env.NODE_ENV ,可用来判断是开发模式还是生产模式。

当然也可以在 webpack.config.js 中,只是写起来有点冗余,尤其是需要在多个规则中用到 postcss-loader 时:

压缩 CSS 其他方法可以参考 Webpack 文档中 这一段 。

用 style-loader 时:

用 MiniCssExtractPlugin 时, 注意 sourcemap 得配置成“ inline ”,不然调试时仍旧无法定位到 .less 源码,只能定位到编译后的 CSS 文件。

相关了解……

你可能感兴趣的内容

大家正在搜

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网