跳到主要内容

PostCSS

PostCSS 是一个使用 JavaScript 转换 CSS 的工具。可以理解成 css 的「后处理器」

  • 添加浏览器前缀
  • css 语法降级

安装​

pnpm add -D postcss postcss-cli

打包：

npx postcss style.css -o dist.css

添加浏览器前缀​

pnpm add -D autoprefixer

使用插件：

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

查看哪些属性需要添加前缀：

npx autoprefixer --info

创建postcss.config.js​

在项目根目录下创建postcss.config.js文件，内容如下：

module.exports = {
  plugins: [require('autoprefixer')]
};

此时就不需要在命令行添加-u autoprefixer了

npx postcss style.css -o dist.css

配置脚本命令​

在 package.json 中添加脚本命令：

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

后续只需要执行pnpm build即可

支持 css 最新的特性​

安装postcss-preset-env预设，支持 css 最新的特性。

pnpm add -D postcss-preset-env

注意：如果用了 postcss-preset-env，就不必使用 autoprefixer

例如使用嵌套语法：

.box {
  bgckground: green;
  &:hover {
    bgckground: red;
  }
}
postcss.config.js
const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcssPresetEnv({
      /* pluginOptions */
    })
  ]
};

配置 stylelint​

pnpm add -D stylelint stylelint-config-standard

创建.stylelintrc.json文件

{
  "extends": ["stylelint-config-standard"]
}

然后在postcss.config.js中使用：

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    require('stylelint'),
    require('autoprefixer'),
    postcssPresetEnv({
      stage: 0
    })
  ]
};

执行打包命令后，就可以看到一堆警告信息

配置 postcss-pxtorem​

https://github.com/cuth/postcss-pxtorem

pnpm add -D postcss-pxtorem

然后在postcss.config.js中使用：

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    require('stylelint'),
    require('autoprefixer'),
    postcssPresetEnv({
      stage: 0
    }),
    require('postcss-pxtorem')
  ]
};

执行命令后，可以在打包后的 css 文件中看到 px 单位被转为 rem

使用默认设置时，仅针对与字体相关的属性。如果想让其他属性也支持转换，可以配置propList

const postcssPresetEnv = require('postcss-preset-env');
const pxtorem = require('postcss-pxtorem');

module.exports = {
  plugins: [
    require('stylelint'),
    require('autoprefixer'),
    postcssPresetEnv({
      stage: 0
    }),
    pxtorem({
      propList: ['*']
    })
  ]
};