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

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

测试环境

node -v
v16.14.0

  

 

  
1
  
2
 

使用 postcss

安装

pnpm i -D postcss postcss-cli 

  

 

  
1
 

package.json

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

运行命令

npx postcss style.css -o dist.css

  

 

  
1
 

输入 style.css

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


  

 

  
1
  
2
  
3
  
4
 

输出 dist.css

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

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

  

 

  
1
  
2
  
3
  
4
  
5
 

使用插件 autoprefixer

安装

pnpm i -D autoprefixer

  

 

  
1
 

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

  

 

  
1
 

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

调试模式

npx autoprefixer --info

  

 

  
1
 

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

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

  

 

  
1
  
2
  
3
  
4
  
5
 

不输出sourcemaps

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

  

 

  
1
 

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

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


  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

配置文件 postcss.config.js

postcss.config.js

import autoprefixer from "autoprefixer";

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

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

npx postcss style.css -o dist.css

  

 

  
1
 

使用插件 postcss-preset-env

安装

pnpm i -D postcss-preset-env

  

 

  
1
 

配置文件 postcss.config.js

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

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


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
 

关于stage:

输入 style.css

.box {
  box-sizing: border-box;

  &:hover{
    color: #ffffff;
  }
}


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

输出 dist.css

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


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

使用 stylelint

pnpm install --save-dev stylelint stylelint-config-standard

  

 

  
1
 

配置文件 stylelint.config.cjs

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


  

 

  
1
  
2
  
3
  
4
 

$ 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)


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

修复问题

.box {
  box-sizing: border-box;

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


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

$ npx stylelint style.css

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

1 problem (1 error, 0 warnings)

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

关闭冲突规则

pnpm i -D stylelint-config-prettier

  

 

  
1
 

stylelint.config.cjs

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


  

 

  
1
  
2
  
3
  
4
 

使用插件 stylelint

postcss.config.js

import stylelint from "stylelint";

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


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

使用插件 postcss-pxtorem

package.json 增加脚本

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

  

 

  
1
  
2
  
3
  
4
  
5
 

安装

pnpm i -D postcss-pxtorem

  

 

  
1
 

配置 postcss.config.js

import pxtorem from "postcss-pxtorem";

export default {
  
  plugins: [
    pxtorem
  ],
};


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

font-size: 15px;

// 输出
font-size: 0.9375rem;

  

 

  
1
  
2
  
3
  
4
 

完整配置

$ tree -I node_modules
.
├── package.json
├── pnpm-lock.yaml
├── postcss.config.js
├── src
│   └── style.css
└── stylelint.config.cjs

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

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%"
  ]
}


  

 

  
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
 

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,
  ],
};


  

 

  
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
 

stylelint.config.cjs

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


  

 

  
1
  
2
  
3
  
4
 

参考
13 分钟掌握 PostCSS

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/126336560