postCss

PostCss

PostCss是一个样式处理工具，它通过自定义的插件和工具生态体系来重新定义css。这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins，编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。插件链接

webpack中使用postcss

比如我们使用less来编写css代码，因此文件就是这样的文件文件名.less了，因此该文件需要依次经过less-loader, postcss-loader css-loader, style-loader编译。因此需要如下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            }
          },
          {
            loader: 'postcss-loader'
          },
          "less-loader"
        ]
      }
    ]
  }
}

运行npm run dev 会报错，因为less需要安装less包支持：

1	npm install less --save-dev

安装完成后，继续打包还是会有报错，命令行会提示错误No PostCSS Config found。这是项目的根目录下，我们还需要新建一个 postcss.config.js 文件，然后里面添加一个如下简单的代码即可：

module.exports = {
  plugins: [
    //require('precss'),
    //require('autoprefixer')
  ]
}
//默认不做任何处理

但是如上代码仅仅配置了postcss，但是并没有使用内部的插件，因此我们需要把对应的一些常用的插件加上，比如 autoprefixer 自动添加前缀，cssnano 压缩css代码，postcss-cssnext css的下一代，使用css4的新语法等等。先安装这几个插件吧，如下命令安装：

1	npm install --save-dev autoprefixer cssnano postcss-cssnext

在postcss.config.js文件做如下配置即可：

module.exports = {
  plugins: [
    require('autoprefixer')(),
    require('postcss-cssnext')(),
    require('cssnano')()
  ]
}

然后我们就可以在浏览器查看，postCss预处理的效果。

js API

对于其它的应用环境，你可以使用 JS API：

const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
const precss = require('precss')
const fs = require('fs')

fs.readFile('src/app.css', (err, css) => {
  postcss([precss, autoprefixer])
    .process(css, { from: 'src/app.css', to: 'dest/app.css' })
    .then(result => {
      fs.writeFile('dest/app.css', result.css)
      if ( result.map ) fs.writeFile('dest/app.css.map', result.map)
    })
})

阅读 PostCSS API 文档获取更多有关 JS API 的信息.

PostCSS可以解决的问题

解决全局 CSS 的问题
提前使用先进的 CSS 特性
更佳的 CSS 可读性
图片和字体
提示器（Linters）

详情请查看链接