postcss部分插件小记

现有postcss插件列表：

1.autoprefixer自动补充前缀

功能：补全css属性前缀，如transform -> -webkit-transform

1.1 支持浏览器配置

支持浏览器列表：browsers，文档

我的移动端配置：

1
2
3

'last 2 versions',
'android 4', 
'ios 8'

PC端配置：

1	['ie 6-8', 'Firefox > 20', 'cover 99.5%']

1.2 webpack配置

安装node依赖包postcss-loader，autoprefixer

1	npm i -D postcss-loader autoprefixer

webpack.config.js配置如下

// webpack.config.js
module.exports = {
    // css
    {
        test: /\.css$/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            {
                loader: 'postcss-loader',
                options: {
                    plugins: [
                        require('autoprefixer')({
                            browsers: [
                                'last 2 versions',
                                'android 4', 
                                'ios 8'
                            ]
                        })
                    ]
                }
            }
        ]
    },
}

1.3 vue-cli3配置

vue-cli默认安装autoprefixer，配置项目根目录package.json文件中的browserslist字段。其他配置可见vue-cli3配置文档

如

"browserslist": [
    "last 2 versions",
    "android 4", 
    "ios 8"
 ]

1.4 create-react-app配置

同上vue-cli3配置，package.json文件中的browserslist字段

2.postcss-plugin-px2rem px转rem

功能：取消用编辑器将px转rem

2.1 配置参数

{
    rootValue: 75,         //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
    unitPrecision: 4,     // 保留小数
    exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/
    propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
    propBlackList: [],     //黑名单
    selectorBlackList: [], //要忽略并保留为px的选择器
    ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
    replace: true,         // （布尔值）替换包含REM的规则，而不是添加回退。
    mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
    minPixelValue: 3     //设置要替换的最小像素值(3px会被转rem)。 默认 0
}

2.2 安装依赖

安装node依赖包postcss-loader，postcss-plugin-px2rem

1	npm i -D postcss-loader postcss-plugin-px2rem

2.3 webpack配置

webpack.config.js配置如下

// webpack.config.js
module.exports = {
    // css
    {
        test: /\.css$/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            {
                loader: 'postcss-loader',
                options: {
                    plugins: [
                        require('postcss-plugin-px2rem')({
                            rootValue: 75,
                            unitPrecision: 4
                        })
                    ]
                }
            }
        ]
    },
}

2.4 vue-cli3配置

修改vue.config.js配置文件，如

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-plugin-px2rem')({
                        rootValue: 75,
                        unitPrecision: 4
                    }),
                ]
            }
        }
    },
};

2.5 create-react-app配置

找到config目录下webpack.config.js（或webpack.config.dev.js），找到postcss-loader配置位置（搜索postcss-loader），添加px2rem配置插件，如

//...
{
    // 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,
            }),
            require('postcss-plugin-px2rem')({
                rootValue: 75,
                unitPrecision: 4
            })
        ],
        sourceMap: isEnvProduction && shouldUseSourceMap,
    },
}
//...

3.postcss-px-to-viewport px转vw

功能：取消用编辑器将px转vw

3.1 配置参数

{
  unitToConvert: 'px',		// (String) 需要转换的单位，默认为"px"
  viewportWidth: 320,		// (Number) 设计稿的视口宽度
  unitPrecision: 5,			// (Number) 单位转换后保留的精度
  propList: ['*'],			//  (Array) 能转化为vw的属性列表
  viewportUnit: 'vw',		//  (String) 希望使用的视口单位
  fontViewportUnit: 'vw',	// (String) 字体使用的视口单位
  selectorBlackList: [],	// (Array) 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
  minPixelValue: 1,			// (Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
  mediaQuery: false,		//  (Boolean) 媒体查询里的单位是否需要转换单位
  replace: true,			// (Boolean) 是否直接更换属性值，而不添加备用属性
  exclude: [],				//  (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
  landscape: false,			// (Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
  landscapeUnit: 'vw',		//  (String) 横屏时使用的单位
  landscapeWidth: 568		//  (Number) 横屏时使用的视口宽度
}

3.2 安装依赖

1	npm i -D postcss-px-to-viewport

webpack/vue/react配置方式同上px2rem的配置方式（2.3~2.5），在此不做介绍

【笔记】postcss部分插件小记