ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端工程化工具系列（十二）—— PostCSS(v8.4.38)：CSS 转换工具 [打印本页]

作者: 王海鱼 时间: 2024-6-13 15:23
标题: 前端工程化工具系列（十二）—— 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企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)