css类

1. postcss-loader 工具

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

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

- 使用postcss

安装loader
npm install postcss-loader –save-dev
webpack配置
一般与其他loader配合使用，下面*标部分才是postcss用到的
配合时注意loader的顺序（从下面开始加载）
项目根目录下新建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

JavaScript 常用 loader的使用以及作用

css类

1. postcss-loader 工具

- 使用postcss

- 插件