PostCSS 插件使用
2_postcss.css
是源文件, 3_post.css
是生成的文件
- 全局安装 postcss-cli
npm install postcss-cli -g
- 全局安装 autoprefixer
npm install autoprefixer -g
- 全局安装后,就可以直接调用如下命令
postcss 2_postcss.css
全局安装比较方便,下面演示的是本地安装
- 创建 package.json
# 初始化
npm init
- 可以在
package.json
“scripts” 中添加 post(以后npm run post
即可)
"scripts": {
"post": "./node_modules/.bin/postcss 2_postcss.css -o 3_post.css"
},
- 本地安装 postcss-cli (Windows 终端要切换成 GitBash)
# 安装 postcss-cli
npm install postcss-cli
# 运行检验(终端要切换成 GitBash)
./node_modules/.bin/postcss 2_postcss.css
- 第一次运行会出现如下情况,先不用管。是因为没有创建配置文件
// 没有设置解析器
You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing
第一个插件 autoprefixer(格式化/加前缀)
- 在本地安装 autoprefixer
npm install autoprefixer
- 新建
postcss.config.js
配置文件,之后添加如下内容
const autoprefixer = require('autoprefixer');
module.exports = {
plugins: [
autoprefixer({
browsers:['>0%']
})
]
};
- 在终端运行一下
npm run post
,运行后又发现新问题(但不影响文件的生成)
// 版本问题,引用有修改
Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.
Using browsers option can cause errors. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.
If you really need to use option, rename it to overrideBrowserslist
-
把 browsers 修改为 overrideBrowserslist 即可
浏览器占比参考:usage-table
browserslist 使用用法参考:browserslist
overrideBrowserslist:['>0%']
第二个插件 postcss-import(合并样式表)
- 在本地安装 postcss-import
npm install postcss-import
-
新建
4_post.css
增加内容,并让2_postcss.css
引入@import 4_post.css
-
修改
postcss.config.js
配置文件
const autoprefixer = require('autoprefixer');
const atImport = require('postcss-import');
module.exports = {
plugins: [
atImport,
autoprefixer({
overrideBrowserslist:['>=0%']
}),
]
};
- 在终端运行一下
npm run post
即可
第三个插件 cssnano(压缩代码)
- 在本地安装 cssnano
npm install cssnano
- 修改
postcss.config.js
配置文件
const cssnano = require('cssnano');
module.exports = {
plugins: [
cssnano
]
};
- 在终端运行一下
npm run post
即可
第四个插件 cssnext
- 在本地安装 postcss-cssnext
npm install postcss-cssnext
-
在
2_postcss.css
添加如下代码cssnext 只支持用
:root
定义变量@apply 类似 mixin
:root{
--mainColor: red;
--danger-theme:{
color: white;
background-color: red;
};
}
a{
color: var(--mainColor);
}
.danger{
@apply --danger-theme;
}
- 修改
postcss.config.js
配置文件
const cssnext = require('postcss-cssnext');
const cssnano = require('cssnano');
module.exports = {
plugins: [
cssnext,
cssnano
]
};
- 在终端运行一下
npm run post
即可
第五个插件 precss
-
变量
-
条件(if)
-
循环
-
Mixin Extend
-
import
-
属性值引用
-
在本地安装 precss
npm install precss
- 在
2_postcss.css
添加如下代码
$blue: #056ef0;
$column: 200px;
.menu {
width: calc(4 * $column);
}
.menu_link {
background: $blue;
width: $column;
}
.notice--clear {
@if 3 < 5 {
background: green;
} @else {
background: blue;
}
}
@for $i from 1 to 3 {
.b-$i {
width: $(i) px;
}
}
- 修改
postcss.config.js
配置文件
const precss = require('precss');
module.exports = {
plugins: [
precss,
]
};
- 在终端运行一下
npm run post
即可
PostCSS 支持的构建工具(Gulp)
-
CLI 命令行工具
-
webpack postcss-loader
-
Gulp gulp-postcss
-
Grunt grunt-postcss
-
Rollup rollup-postcss
-
在本地安装 gulp-cli 、 gulp 和 gulp-postcss
npm install gulp-cli
npm install gulp
npm install gulp-postcss
- 创建
gulpfile.js
添加如下代码
const gulp = require("gulp");
const autoprefixer = require("autoprefixer");
const atImport = require("postcss-import");
// 指定任务名为 postcss
gulp.task("postcss", function () {
var postcss = require("gulp-postcss");
// 指定源文件来自 2_postcss.css
return gulp
.src("2_postcss.css")
.pipe(
postcss([
atImport,
autoprefixer({
overrideBrowserslist: [">=0%"],
}),
])
)
.pipe(gulp.dest("3_post"));
});
- 在终端运行一下
gulp postcss
即可