海浪Code

Appearance

简介 ​

什么是postcss？

PostCSS和sass/less不同, 它不是CSS预处理器 PostCSS是一款使用插件去转换CSS的工具， PostCSS有许多非常好用的插件 例如

  • autoprefixer(自动补全浏览器前缀)
  • postcss-pxtorem(自动把px代为转换成rem)
  • ...

自动补齐浏览器前缀 ​

sh
npm i -D postcss-loader

npm i -D autoprefixer

配置loader:

🔴注意 postcss-loader 执行在 style-loader 之前，less-loader 之后

JavaScript
...
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
...

创建 postcss.config.js，并配置

JavaScript
//postcss.config.js
module.exports = {
    plugins: {
        "autoprefixer": {
            "overrideBrowserslist": [
                 "ie >= 8", // 兼容IE7以上浏览器
                 "Firefox >= 3.5", // 兼容火狐版本号大于3.5浏览器
                 "chrome  >= 35", // 兼容谷歌版本号大于35浏览器,
                 "opera >= 11.5", // 兼容欧朋版本号大于11.5浏览器
            ]
        }
    }
};

使用PostCSS自动将px转换成rem ​

下载库

sh
npm install postcss-pxtorem -D

配置文件

JavaScript
//postcss.config.js
"postcss-pxtorem": {
    rootValue: 100, // 根元素字体大小
    propList: ['*'] // 可以从px更改到rem的属性
    // propList: ["height"]
}

#webpack