0
点赞
收藏
分享

微信扫一扫

postcss及其插件autoprefixer、postcss-preset-env、stylelint的使用


目录

  • ​​使用 postcss​​
  • ​​使用插件 autoprefixer​​
  • ​​配置文件 postcss.config.js​​
  • ​​使用插件 postcss-preset-env​​
  • ​​使用 stylelint​​
  • ​​使用插件 stylelint​​
  • ​​使用插件 postcss-pxtorem​​
  • ​​完整配置​​

CSS 界的 Babel,能够转译 CSS 代码,通过一些列插件增强浏览器兼容性,并让开发者提前用上新特性

插件或库

说明

网址

postcss

Transforming styles with JS plugins

​​官网​​​、​​github​​

postcss-cli

CLI for postcss

​​github​​

postcss.parts

A searchable catalog of PostCSS plugins

​​官网​​

browserslist

The config to share target browsers and Node.js versions between different front-end tools.

​​github​​

autoprefixer

Parse CSS and add vendor prefixes to rules by Can I Use

​​github​​

postcss-preset-env

convert modern CSS into something most browsers can understand

​​github​​

stylelint

A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.

​​官网​​​、​​github​​

测试环境

node

使用 postcss

安装

pnpm

package.json

{
"type": "module",
"devDependencies": {
"postcss": "^8.4.16",
"postcss-cli": "^10.0.0"
}
}

运行命令

npx postcss style.css -o dist.css

输入 style.css

.box {
box-sizing: border-box;
}

输出 dist.css

.box {
box-sizing: border-box;
}

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiJkaXN0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5ib3gge1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xufVxuIl19 */

使用插件 autoprefixer

安装

pnpm

npx postcss style.css -o dist.css -u autoprefixer

运行完命令发现,并没有什么改变,原因是css语法已经兼容了默认指定浏览器的版本,并不需要额外的处理

调试模式

npx autoprefixer --info

设置要兼容的浏览器版本
package.json

{
"browserslist": [
"cover 99.5%"
]
}

不输出sourcemaps

npx postcss style.css -o dist.css -u autoprefixer --no-map

输出,可以看到已经增加了浏览器前缀

.box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

配置文件 postcss.config.js

postcss.config.js

import autoprefixer from "autoprefixer";

export default {
map: false,
plugins: [autoprefixer],
};

使用了配置文件后,可以简化命令行

npx postcss style.css -o dist.css

使用插件 postcss-preset-env

安装

pnpm

配置文件 postcss.config.js

import autoprefixer from "autoprefixer";
import postcssPresetEnv from "postcss-preset-env";

export default {
map: false,
plugins: [
autoprefixer,
postcssPresetEnv({
stage: 0,
}),
],
};

关于stage:

阶段

名称

说明

Stage 0

脑袋风暴阶段

高度不稳定,可能会发生变化。

Stage 1

实验阶段

也非常不稳定,可能会发生变化,但是该提案已得到 W3C 成员的认可。

Stage 2

承认阶段

高度不稳定并且可能会发生变化,但是正在积极研究中。

Stage3

拥抱阶段

稳定且变化不大,此功能可能会成为标准。

Stage4

标准阶段

最终的解决方案,所有主流浏览器都支持。

输入 style.css

.box {
box-sizing: border-box;

&:hover{
color: #ffffff;
}
}

输出 dist.css

.box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box:hover{
color: #ffffff;
}

使用 stylelint

pnpm install

配置文件 stylelint.config.cjs

module.exports = {
extends: ["stylelint-config-standard"],
};

$ npx stylelint style.css

style.css
4:9 ✖ Expected single space before "{" block-opening-brace-space-before
5:12 ✖ Expected "#ffffff" to be "#fff" color-hex-length

2 problems (2 errors, 0 warnings)

修复问题

.box {
box-sizing: border-box;

&:hover{
/* color: #ffffff; */
color: #fff;
}
}

$ npx stylelint style.css

style.css
4:9 ✖ Expected single space before "{" block-opening-brace-space-before

1 problem (1 error, 0 warnings)

关闭冲突规则

pnpm

stylelint.config.cjs

module.exports = {
extends: ["stylelint-config-standard", "stylelint-config-prettier"],
};

使用插件 stylelint

postcss.config.js

import stylelint from "stylelint";

export default {
plugins: [
stylelint({
fix: true
}),
],
};

使用插件 postcss-pxtorem

package.json 增加脚本

{
"scripts": {
"build": "postcss style.css -o dist.css"
}
}

安装

pnpm

配置 postcss.config.js

import pxtorem from "postcss-pxtorem";

export default {

plugins: [
pxtorem
],
};

font-size: 15px;

// 输出
font-size: 0.9375rem;

完整配置

$ tree -I node_modules
.

package.json

{
"type": "module",
"scripts": {
"build": "postcss src/**/*.css --dir dist",
"dev": "postcss src/**/*.css --dir dist --watch"
},
"devDependencies": {
"autoprefixer": "^10.4.8",
"postcss": "^8.4.16",
"postcss-cli": "^10.0.0",
"postcss-preset-env": "^7.7.2",
"postcss-pxtorem": "^6.0.0",
"stylelint": "^14.10.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard": "^27.0.0"
},
"browserslist": [
"cover 99.5%"
]
}

postcss.config.js

import autoprefixer from "autoprefixer";
import stylelint from "stylelint";
import postcssPresetEnv from "postcss-preset-env";
import pxtorem from "postcss-pxtorem";

export default {
// 不生成 sourcemaps
map: false,

plugins: [
// 语法校验
stylelint({
fix: true, // 自动修复
}),

// 自动添加浏览器前缀
autoprefixer,

// 使用新语法
postcssPresetEnv({
stage: 0,
}),

// 单位转换:px->rem
pxtorem,
],
};

stylelint.config.cjs

module.exports = {
extends: ["stylelint-config-standard", "stylelint-config-prettier"],
};

参考
​​​13 分钟掌握 PostCSS​​


举报

相关推荐

0 条评论