PostCSS -- 中文
- postCSS本身是一个功能比较单一的工具。它提供了一种方式用javaScript代码来处理css。利用postcss可以实现一些工程化的操作,如:自动添加浏览器前缀,代码合并,代码压缩等。
如何使用postCSS
- 安装node环境
- 安装postcss脚手架
npm install postcss -g
- -o -w命令
-o : 编译文件到**路径下
-w : 热编译
postcss src/demo.css -o dist/demo.css -w
- js依赖
在跟目录下新建 postcss.config.js
使用postcss插件 Postcss插件库
-初始化npm依赖,生成package.json文件
npm init
- 安装 autoprefixer (自动添加浏览器前缀)
npm i autoprefixer
- 在postcss.config.js中使用autoprefixer
const autoprefixer = require('autoprefixer')
module.exports = {
plugins : [
autoprefixer({
browsers : [' > 0%']
})
]
}
- 安装postcss-import (多个css文件进行合并)
npm i postcss-import
- 在postcss.config.js中使用postcss-import
const cssImport = require('postcss-import')
module.exports = {
plugins : [
cssImport
]
}
- 安装cssnano (对css进行压缩处理)
npm i cssnano
- 在postcss.config.js中使用cssnano
const cssnano = require('cssnano')
module.exports = {
plugins : [
cssnano
]
}
-安装postcss-cssnext (处理css高级语法)
npm i postcss-cssnext
- 在postcss.config.js中使用cssnano
const cssnext = require('cssnext')
module.exports = {
plugins : [
cssnext
]
}
其他插件引入方式相似,在官网查看文档,可以进行其他设置。
网友评论