css类

1. postcss-loader 工具

自动补全浏览器前缀
自动把px转为rem
css 代码压缩
使用下一代css语法等等

postcss 只是一个工具，本身不会对css一顿操作，它通过 插件 实现功能，autoprefixer 就是其一。

- 使用postcss

1. 安装loader
   npm install postcss-loader –save-dev

2. webpack配置
   一般与其他loader配合使用，下面*标部分才是postcss用到的
   配合时注意loader的顺序（从下面开始加载）

3. 项目根目录下新建postcss.config.css

module.exports = {
  plugins: {
    "autoprefixer": '> 5%' // 可以都不填，使用默认配置
  }
}

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

- 插件

• Autoprefixer
  前缀补全，全自动的，无需多说
  cnpm install Autoprefixer --save-dev

• postcss-cssnext
  使用下个版本的css语法
  cnpm install postcss-cssnext --save-dev

• postcss-pxtorem
  把px转换成rem
  cnpm install postcss-pxtorem --save-dev
  配置项:

{
  rootValue: 16, // 在html根节点设置的-size大小
  unitPrecision: 5, // 转rem精确到小数多少位
  propList: ['font', 'font-size', 'line-height', 'letter-spacing'], // 指定转换成rem的属性，支持*
  selectBlackList: [], // 指定不转换的选择器
  replace: true,
  mediaQuery: false, // 媒体查询的px是否进行转换
  minPixelValue: 0 // 小于指定数值px的不转换
}

特殊技巧:不转换成rem
px检测区分大小写，也就是说Px/PX/pX不会被转换，可以用这个方式避免转换成rem

• postcss-modules and react-css-modules automatically isolate selectors within components.
• postcss-autoreset is an alternative to using a global reset that is better for isolatable components.
• postcss-initial adds all: initial support, which resets all inherited styles.
• autoprefixer adds vendor prefixes, using data from Can I Use.
• postcss-preset-env allows you to use future CSS features today.
• precss contains plugins for Sass-like features, like variables, nesting, and mixins.
• postcss-assets inserts image dimensions and inlines files.
• postcss-sprites generates image sprites.
• postcss-inline-svg allows you to inline SVG and customize its styles.-
• postcss-write-svg allows you to write simple SVG directly in your CSS.
• postcss-syntax switch syntax automatically by file extensions.
• postcss-html parsing styles in <style> tags of HTML-like files.
• postcss-markdown parsing styles in code blocks of Markdown files.
• postcss-jsx parsing CSS in template / object literals of source files.
• postcss-styled parsing CSS in template literals of source files.
• postcss-scss allows you to work with SCSS (but does not compile SCSS to CSS).
• postcss-sass allows you to work with Sass (but does not compile Sass to CSS).
• postcss-less allows you to work with Less (but does not compile LESS to CSS).
• postcss-less-engine allows you to work with Less (and DOES compile LESS to CSS using true Less.js evaluation).
• postcss-js allows you to write styles in JS or transform React Inline Styles, Radium or JSS.
• postcss-safe-parser finds and fixes CSS syntax errors.
• postcss-will-change this plugin uses backface-visibility to force the browser to create a new layer, without overriding existing backface-visibility properties.