webpack学习(五) -- postcss的使用

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语法转为正常的css语法

学到这里，我又不得不去补一下cssnext知识。哭，自己会的太少啦！关于cssnext做了简单的了解，等小女有时间再系统的学习吧，哭~

继续学习！这里先简单使用一下cssnext的语法，然后将其解析为正常的css语法。下图红框为cssnext语法，意为在根元素定义一个color变量为red，然后在a标签里使用该变量。

注：如果使用postcss-cssnext时同时使用了autoprefixer插件，就会报警告的。也就是说，在postcss-cssnext插件中已经完全支持了autoprefixer插件的功能，所以取一个就行了

去掉autoprefixer插件后，再执行webpack，这时候已经没有报错，打开我们的css出口文件index.css文件，可以发现，nextcss语法已经变为css语法，autoprefixer有的添加前缀的功能，也存在

总结

以上就是postcss简单的配置使用，小女文案功底不太好，知识也是在边学习边总结，有不足之处请随时指出，感谢掘金大佬们对我的监督。好啦，我去学习nextcss了，据说是下一代css语法O(∩_∩)O~~~

转载于:https://juejin.im/post/5cab0f6f6fb9a05e233caa3a