postcss处理css
原文链接:https://www.jianshu.com/p/4c8e0d869a19
postcss是处理css,它又包含了很多对css的插件,可以查看链接上的。
加载 postcss-loader
cnpm i -D postcss-loader
postcss里常用的插件,压缩css :cssnano ,自动加前缀: autoprefixer,加前缀的规则是根据can i use 的标准,现在的 浏览器都在进一步标准化,现在大部分前缀都不需要了,以后也肯定会都不需要。每个插件都有配置参数。
cnpm i -D cssnano auotprefixer
配置postcss可以在单独的postcss.config.js,也可以在webpack里的配置文件webpack.config.js直接配置.postcss-loader的使用在style-loader、 css-loader之后,但是在其他loader之前,要是有sass-loader,就得在sass-loader之前。
单独配置默认读取postcss.config.js 文件,不过也可以自定义文件名,然后配置路径,跟webpack一样的套路。
// postcss.config.js
let autoprefixer = require("autoprefixer");
let cssnano = require("cssnano");
moudle.exports={
ident: 'postcss',
plugins:[
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
],
}),
cssnano({
presets:default,
}),
]
}
//也可以像webpack那样导出一个函数,接收参数,这个参数在node 运行的时候会传过来,是个对象,
// 里面包括很多属性,我们只需要用到file,options,env足够。
//webpack.config.js ,这里只简写出rules部分,具体参照下面的配置
rules:[
{
test:/.scss$/,
exclude:/node_modules/,
use:extractCss.extract({
fallback:"style-loader",
use:[
{
loader:"css-loader",
options:{
module:true
}
},
{
loader:"postcss-loader", // 注意位置在 sass-loader之前
},
{
loader:"sass-loder",
}
]
})
}
]
直接在webpack.config.js配置,就是把上面的文件直接写在每个loader的options配置里
// webpack.config.js
const path= require("path");
// 分离css
let extractCssPlugin = require("extract-text-webpack-plugin");
let extractCss = new extractCssPlugin({
filename:"css/[name].boundle.css",
ignoreOrder:true,
});
let autoprefixer= require("autoprefixer");
let cssnano = require("cssnano");
module.exports = {
entry:{
main:"src/main.js"
},
output:{
path:path.join(__dirname,"build"),
filename:[name].boundle.js,
}
module:{
rules:[
{
test:/.scss$/,
exclude:/node_modules/,
use:extractCss.extract({
fallback:"style-loader",
use:[
{
loader:"css-loader",
options:{
module:true
}
},
{
loader:"postcss-loader",
options:{
ident: 'postcss',
plugins:[
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
],
}),
cssnano({
presets:default,
}),
]
}
},
{
loader:"sass-loder",
}
]
})
}
]
},
plugins:[
extractCss ,
]
}
当在postCss 里使用 cssnao 插件的时候,它里面有很多默认额配置的,如果直接使用默认额配置,会有一些坑,搞的你怀疑人生!让我印象深刻的是帧动画 @keyframes ,居然把动画名字压缩到一个字母 ,搞的很多动画的名称因为是一个字母就全部重命了,动画效果全都牛头不对马嘴,烂七八糟的。一遍又一遍额检查css有没有写错,css的帧动画额语法是不是错了,搞的都怀疑我之前写的帧动画是不是错的了。后来又找webpack里sass-loader 的配置是不是少了啥,还开启了 modules :true ,把antd里css全整没了。css模块我倒是了解。我干脆把动画的css单独用css,不用scss了,动画名还是不对,应该不是sass-loader 的配置问题。后来又改变css引入的顺序问题,还是不行。找来以前的项目,以前的项目的css编译出来的动画名没问题的。我倒要看看编译出来的动画名是啥,关闭了css压缩,居然就好了。这下就有直接联系的问题在网上找答案了。之前总是在找sass 帧动画名称改变,找到的都不是。要是聪明的分析,早就应该发现是cssnao压缩的问题。直接看cssnao 这个插件的配置吧!
地址:http://cssnano.co/guides/optimisations/
cssnao里有一个配置
cssnano({
preset: ['default'],
reduceIdents: false // 高级配置
})
现在的webpack 都已经内置了cssnao ,要是不配置就用默认额配置,其中有很多的坑,他会把所有额z-index进行比较再输出z-index的值,也就是说输出的不是你以前设置的,具体额输出规则可以研究下,不过要是不这样做,可以在postCsss设置
const plugins = [
autoprefixer({
browsers: [
'>10%',
'last 4 versions',
'Firefox ESR',
'not ie < 9',
],
}),
cssnano({
preset: ['default',{
/*discardUnused:[
{fontFace:true},
{keyframes:false},
{namespace:false},
{counterStyle:false},
]*/
}],
reduceIdents: false,
zindex:false //防止编译时z-index 被改变
})
];
Last updated
Was this helpful?