搞定你的PostCSS配置

Posted 2021-04-09 Vue中文社区

PostCSS并不是一门语言，而是一个类似于webpack的工具，它支持很多插件，来达到便捷的编译效果，组成一个CSS编译/lint/autoprefixer的生态圈。它的作者是Euil Martians，一家致力于技术研究与网站外包开发的公司。其后端技术栈偏重于Ruby，而前端从React到Node都有涉猎。

PostCSS的一大特点是，具体的编译插件甚至是CSS书写风格，可以根据自己的需要进行安装，选择自己需要的特性：嵌套，函数，变量。自动补全，CSS新特性等等，而不是像less或者scss一样的大型全家桶。因此，不需要再专门去学习less或者scss的语法，只要选择自己喜欢的特性，可以只写CSS文件，但依旧可以写嵌套或者函数，然后选择合适的插件编译它就行了。

Use with webpack

鉴于现在webpack也越来越火，所以之后的配置主要是借助于postcss-loader，将PostCSS的生态圈依托在webpack之下。

# 安装webpack postcss loader
$ npm install postcss-loader --save-dev

基本配置

// 配置webpack.config.js
// ...
module: {
  loaders: [
    {
      test: /\.css$/,
      // 如果使用了 ExtractTextPlugin
      loader: ExtractTextPlugin.extract('style', 'css!postcss')
      // 否则
      // loader: "style-loader!css-loader!postcss-loader"
    }
  ]
},
postcss: function () {
    return [ // 里面是我们要用的插件
    ];
}

使用插件

快速配置一览

# cssnext可以让你写CSS4的语言，并能配合autoprefixer进行浏览器兼容的不全，而且还支持嵌套语法
$ npm install postcss-cssnext --save-dev
# 浏览器兼容补全
$ npm install autoprefixer --save-dev

# 类似scss的语法，实际上如果只是想用嵌套的话有cssnext就够了
$ npm install precss --save-dev

# 在@import css文件的时候让webpack监听并编译
$ npm install postcss-import --save-dev

// 配置webpack.config.js
const postcssImport = require('postcss-import');
const cssnext = require('postcss-cssnext');

// ...
postcss: function () {
    return [
    postcssImport({ addDependencyTo: webpack }),
        cssnext({autoprefixer: {browsers: "ie >= 10, ..."}})
    ];
}

兼容性CSS的自动补全

$ npm install autoprefixer --save-dev

• autoprefixer也可以单独配置使用

// webpack.config.js
const autoprefixer = require('autoprefixer');
// ...
postcss: function(){
  return [autoprefixer({ browsers: ['last 2 versions'] })]
}

• 或者与postcss-cssnext一起使用，但autoprefixer都要进行安装

const cssnext = require('postcss-cssnext');

postcss: function(){
  // 通过配置browsers，可以指定将CSS语法兼容到什么程度
  return [cssnext({autoprefixer: {browsers: "ie >= 10, ..."}})]
}

• `autoprefixer`的配置

Use stylelint

Stylelint插件可以让你在编译的时候就知道自己CSS文件里的错误

在webpack内单独使用stylelint

用到如下插件：

• stylelint-webpack-plugin

• stylelint-config-standard

$ npm install stylelint-webpack-plugin --save-dev
# stylelint语法，使用标准语法
$ npm install stylelint-config-standard --save-dev

// webpack.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin');
// ...
plugins: [
    new StyleLintPlugin({
      config: {
        // 你的lint扩展自刚刚安装的stylelint-config-standard
        "extends": "stylelint-config-standard"
      },
      // 正则匹配想要lint监测的文件
      files: 'frontend/stylesheet/**/*.l?(e|c)ss'
  }),
],

在PostCSS内使用(荐)

会用到如下插件：

• stylelint

• postcss-reporter

• stylelint-config-standard

1. 基础使用方式

# 安装stylelint
$ npm install stylelint --save-dev

// webpack.config.js
const stylelint = require('stylelint');
// ...
module: {
  loaders: [
    { test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css!postcss') }
  ]
}
postcss: function() {
  return [
    postcssImport({ addDependencyTo: webpack }),
    stylelint({
      failOnError: true
    })
  ]
}

这就是最基本的配置了。因为有postcss-loader的存在，所以在webpack解析css的时候，都会调用postcss里返回的插件，因此就会使用stylelint对代码进行检查。

但这样的配置有一个很严重的缺点：如果你在js中引用了node_module里的css文件，或者引用了其他不想进行编译的文件，PostCSS会对其一视同仁的调用插件编译/检查。此时就需要我们来配置.stylelintignore以及stylelint.config.js进行更精确的编译/检查。

2. 增加配置文件

• stylelint配置说明

• stylelint with postcss配置说明

`.stylelintignore`

在项目根目录下添加.stylelintignore文件，并在内部写下不想通过PostCSS编译的文件路径：

node_modules/
frontend/vendor/

之后，在没有指明ignorePath的情况下，stylelint会自动寻找根目录下的.stylelintignore文件。

`stylelint.config.js`

安装stylelint-config-standard

$ npm install stylelint-config-standard --save-dev

在配置文件中指明我们的检测语法扩展自该插件：

• User guide

• 配置规则

// 常用配置
module.exports = {
  extends: "stylelint-config-standard",
  // 各rules的具体作用见上面链接
  rules: {
    "block-no-empty": null,
    "color-no-invalid-hex": true,
    "comment-empty-line-before": [ "always", {
      "ignore": ["stylelint-commands", "between-comments"],
    } ],
    "declaration-colon-space-after": "always",
    "max-empty-lines": 2,
    "rule-nested-empty-line-before": [ "always", {
      "except": ["first-nested"],
      "ignore": ["after-comment"],
    } ],
    // 允许的单位
    "unit-whitelist": ["em", "rem", "%", "s", "ms", "px"]
  }
};

然后指明PostCSS的配置文件：

postcss: function() {
  return [
    postcssImport({ addDependencyTo: webpack }),
    stylelint({
        config: require('../../stylelint.config.js'),
        failOnError: true
    })
  ]
}

此时运行webpack，有问题的CSS文件输出大概是这样的：

WARNING in ./~/css-loader!./~/postcss-loader!./frontend/stylesheet/layout/test_post_css.css
    stylelint: /Users/ecmadao1/Dev/Python/where_to_go/frontend/stylesheet/layout/test_post_css.css:17:1: Expected indentation of 2 spaces (indentation)

很难看清楚吧！因此接下来安装postcss-reporter来美化输出：

$ npm install postcss-reporter --save-dev

webpack配置：

postcss: function() {
  return [
    postcssImport({ addDependencyTo: webpack }),
    stylelint({
        config: require('../../stylelint.config.js'),
        failOnError: true
    }),
    postcssReporter({ clearMessages: true })
  ]
}

之后的输出会是这样的：

frontend/stylesheet/layout/test_post_css.css
17:1    ⚠  Expected indentation of 2 spaces (indentation) [stylelint]

吊吊哒！

3. StyleLintPlugin的配置参数

stylelint options里面的配置也可以在plugin里使用。介绍几个常用的配置：

• config：lint基础配置。没有的话则会去寻找.stylelintrc

• configFile：lint配置文件。可以被config的配置替代。默认为.stylelintrc文件

• context：上下文环境。默认使用webpack的context

• files：要匹配的文件。默认为['*/.s?(a|c)ss']

• failOnError：错误时是否停止编译。默认false

• quiet：在console中不打印错误信息。默认false




https://github.com/ecmadao/Coding-Guide

近期精彩