postcss使用
功能
- 把css解析为一个抽象语法树
- 调用插件处理抽象语法树并添加功能
下载
//postcss往往不单独使用
npm install postcss postcss-loader autoprefixer cssnano postcss-cssnext
//其中autoprefixer是添加前缀的,解决浏览器兼容问题。比如:-ms-transform:rotate(7deg);
//cssnano是处理压缩的
//postcss-cssnext是另一种css语法
复制代码
使用案例
- 当我们需要处理less文件而不是css文件时,为了less文件生效,我们需要先将less转为css,再转为style或单独的css文件夹,这时候我们就需要在webpack配置文件中进行配置
- 如图为配置文件,红色框为postcss配置部分
注:postcss-loader配置需要放在less-loader上面,css-loader下面,意味着在配置时需要将less进行postcss处理后再转为css-loader。 图中标记的蓝色部分为上述说的css最终两种处理方式,蓝色部分为通过mini-css-extract-plugin插件将css最终处理为单独的css文件;而箭头所指的红色配置则为将css最终处理为行内样式。
- postcss不单用,与各种集成工具共同使用
上图可以发现postcss-loader配置中多了options对象,他的作用就是配置postcss-loader相关内容
- postcss-loader中的options配置
{
loader:'postcss-loader',
options:{
ident: 'postcss', //说明options里面插件的使用是针对于谁的,我们这里是针对于postcss的
plugins:[ //这里的插件只是这对于postcss
require('autoprefixer')() //引入添加前缀的插件,第二个空括号是将该插件执行
]
}
}
复制代码
以上是引入了一个增加前缀的postcss插件,下面我们打包执行一下,看看是什么效果。 git执行webpack,成功后看我们的css出口文件indedx.css文件,发现已经给我们自动添加了前缀,哇,高级高级,赶紧接着看还有什么好用的插件~
{
loader:'postcss-loader',
options:{
ident: 'postcss',
plugins:[
require('cssnano')() //引入压缩插件
]
}
}
复制代码
再执行后再看一下index.css,可以看到已经进行了压缩
学到这里,我又不得不去补一下cssnext知识。哭,自己会的太少啦!关于cssnext做了简单的了解,等小女有时间再系统的学习吧,哭~
继续学习!这里先简单使用一下cssnext的语法,然后将其解析为正常的css语法。下图红框为cssnext语法,意为在根元素定义一个color变量为red,然后在a标签里使用该变量。
去掉autoprefixer插件后,再执行webpack,这时候已经没有报错,打开我们的css出口文件index.css文件,可以发现,nextcss语法已经变为css语法,autoprefixer有的添加前缀的功能,也存在
总结
以上就是postcss简单的配置使用,小女文案功底不太好,知识也是在边学习边总结,有不足之处请随时指出,感谢掘金大佬们对我的监督。好啦,我去学习nextcss了,据说是下一代css语法O(∩_∩)O~~~