王海鱼 发表于 2024-6-13 15:23:19

前端工程化工具系列(十二)—— PostCSS(v8.4.38):CSS 转换工具

PostCSS 是转换 CSS 语法的工具。它提供 API 来对 CSS 文件进行分析和修改它的规则。
PostCSS 本身并不能直接使用,重要是使用基于 PostCSS 编写的插件。
1 安装

pnpm add -D postcss-import postcss-nested postcss-preset-env cssnano
2 配置

在项目根目次下创建 postcss.config.cjs(这个扩展名和别的不一样,明确说明当前模块为 CommonJS,配合 Rollup),填入以下内容:
module.exports = {
plugins: {
    // 转换 CSS 新特性至浏览器可识别的版本
    'postcss-preset-env': {},
    // 解析 CSS 中的 import
    'postcss-import': {},
    // 解析 CSS 中的嵌套
    'postcss-nested': {},
    // 压缩 CSS
    cssnano: {},
},
};
3 独立使用

安装 PostCSS CLI:
pnpm i -g postcss-cli
在命令行中实行:
postcss 要转换的CSS文件
4 结合 Webpack

见《前端工程化工具系列(十四)—— Webpack:应用模块打包器与构建工具》。
5 结合 Rollup

见《前端工程化工具系列(十三)—— Rollup:专注于库构建的 JavaScript 打包器》。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 前端工程化工具系列(十二)—— PostCSS(v8.4.38):CSS 转换工具