PostCSS深入解析:安装、配置与高效使用
warning:
这篇文章距离上次修改已过186天,其中的内容可能已经有所变动。
# 安装PostCSS和一个常用的插件autoprefixer
npm install postcss-cli autoprefixer --save-dev
# 创建一个简单的PostCSS配置文件
# postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({
overrideBrowserslist: ['> 0.15% in CN', 'last 2 versions'],
grid: true
}),
],
};
# 使用PostCSS通过命令行处理一个CSS文件
npx postcss input.css -o output.css
# 或者在package.json中添加一个脚本来运行PostCSS
"scripts": {
"build:css": "postcss src/css/index.css -o dist/index.css"
}
# 运行脚本
npm run build:css
这个例子展示了如何安装PostCSS以及其一个常用插件autoprefixer,并创建了一个简单的配置文件。接着,使用npx命令行工具处理一个输入的CSS文件,并输出处理后的CSS。最后,演示了如何在package.json
中添加一个脚本来自动化这个过程。
评论已关闭