PostCSS 入门

PostCSS是什么

PostCSS是什么？或许，你会认为它是预处理器、或者后处理器等等。其实，它什么都不是。它可以理解为一种插件系统。GitHub主页上的PostCss介绍为:

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

中文 PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。

1. github地址 文档介绍
2. github地址 中文文档

常用插件autoprefixer配置

• vue-cli 生成里面的配置

"postcss": {
	"plugins": {
	  "autoprefixer": {}
	}
},

• create-react-app里面生成的postcss配置

{
	// Options for PostCSS as we reference these options twice
	// Adds vendor prefixing based on your specified browser support in
	// package.json
	loader: require.resolve('postcss-loader'),
	options: {
	  // Necessary for external CSS imports to work
	  // https://github.com/facebook/create-react-app/issues/2677
	  ident: 'postcss',
	  plugins: () => [
	    require('postcss-flexbugs-fixes'),
	    require('postcss-preset-env')({
	      autoprefixer: {
	        flexbox: 'no-2009',
	      },
	      stage: 3,
	    }),
	  ],
	  sourceMap: isEnvProduction && shouldUseSourceMap,
	},
}

webpack配置postcss

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

其他相关链接

1. 阿里妈妈前端快爆（PostCSS专题）
2. postcss插件库
3. It’s Time for Everyone to Learn About PostCSS