postcssrc.js 与 postcss.config.js

postcssrc.js 与 postcss.config.js

postcss是一个使用javascript 工具和插件转换css代码的工具

• 这个文件，其实和postcss.config.js文件的作用是一样的。是postcss外部配置文件
• 在很多的地方，只使用postcss.config.js说明，而很少见到.postcssrc.js，在这篇文章中https://github.com/michael-ciniawsky/postcss-load-config，介绍了postcss-load-config的作用，里面提到了postcss.config.js和.postcssrc.js,但是需要安装postcss-load-config这个插件
• 其实在webpack中，不需要这样做，直接使用post-loader这个插件，加上.postcssrc.js，可以达到和安装postcss-load-config一样的效果。

常见的postcssrc.js配置：

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {}
  }
}

postcss.config.js 是在我们安装了postcss-pxtorem 插件后配置postcss-pxtorem 的文件

常见的postcss.config.js配置：

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-pxtorem')({
      // rootValue: 16,
      // unitPrecision: 5,
      // propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
      // selectorBlackList: [],
      // replace: true,
      // mediaQuery: false,
      // minPixelValue: 0,
      // exclude: [path.resolve(__dirname, './src/pages/liandu/task')],
      exclude: /task/,
      rootValue: 16, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
      propList: ['*'], //可以从px更改到rem的属性,值需要精确匹配。
      // 1.使用通配符 * 启用所有属性。 示例：['*']
      // 2.在单词的开头或者结尾使用 *。 ( ['*position*'] 将匹配 background-position-y )
      // 3.使用 与属性不匹配。! 示例：['*','letter-spacing']!
      // 4.将"非"前缀与其他前缀合并。 示例：['*','font*']!
      unitPrecision: 5, //允许REM单位增长到的十进制数字。
      // propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
      // propBlackList: [], //黑名单
      // exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
      selectorBlackList: [], //要忽略并保留为px的选择器
      ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
      replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
      mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
      minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
    })
  ],
}