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

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

目录

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 -v
v16.14.0

使用 postcss

安装

pnpm i -D postcss postcss-cli 

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 i -D autoprefixer
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 i -D postcss-preset-env

配置文件 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 --save-dev stylelint stylelint-config-standard

配置文件 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 i -D stylelint-config-prettier

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 i -D postcss-pxtorem

配置 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
├── pnpm-lock.yaml
├── postcss.config.js
├── src
│   └── style.css
└── stylelint.config.cjs

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


相关文章
Please use ‘App‘ component instead.报错问题解决
Please use ‘App‘ component instead.报错问题解决
910 0
|
资源调度 前端开发 jenkins
前端工程化(Frontend Tooling):优化开发流程的关键
前端工程化是现代Web开发的关键组成部分,它包括一系列工具、实践和流程,旨在提高开发效率、代码质量和可维护性。本博客将深入探讨前端工程化的概念、工具以及如何在项目中应用它们,以改善您的前端开发体验。
1043 0
|
前端开发 JavaScript
vite中css最佳实践:使用postcss完善项目中的css配置
【8月更文挑战第3天】使用postcss完善项目中的css配置
2985 1
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
10月前
|
JavaScript 开发工具 git
工程化:Commitlint / 规范化Git提交消息格式
通过这些思维导图和分析说明表,您可以更加直观地理解Commitlint的安装、配置和使用方法,从而有效规范Git提交消息,提升团队协作效率和代码质量。
729 9
|
12月前
|
atlas
Cesium导入geojson数据
这篇文章详细描述了如何在Cesium中导入GeoJSON数据来绘制地理矢量数据,并提供了实现的具体方法和示例代码。
453 2
Cesium导入geojson数据
|
前端开发 JavaScript
vite中如何更优雅的使用css
【8月更文挑战第2天】webpack中,我们需要在项目中安装css-loader才能让webpack识别css文件。vue-cli基于webpack,内置了这个loader ,Vite天生就是支持对CSS文件的直接处理的。
475 5
vite中如何更优雅的使用css
|
移动开发 资源调度 前端开发
React Router V6 useRoutes的使用
【8月更文挑战第29天】 React Router V6 useRoutes的使用
536 3
|
JavaScript 前端开发 开发者
【颠覆你的前端世界!】VSCode + ESLint + Prettier:一键拯救Vue代码于水深火热之中,打造极致编程体验之旅!
【8月更文挑战第9天】随着前端技术的发展,保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误,Prettier保证风格统一。首先需安装VSCode插件及Node.js包,然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后,VSCode将自动应用规则,提升编码效率和代码质量。
996 1
|
JSON 前端开发 JavaScript
vite中静态资源(css、img、svg等)的加载机制及其相关配置
【8月更文挑战第3天】vite中静态资源(css、img、svg等)的加载机制及其相关配置
1395 1