webpack处理css

电玩女神 2022-06-18 03:54 215阅读 0赞

在[神奇的babel][babel]中我们提到了babel-loder的使用，那么webpack声称可以处理任何类型的文件，css该怎么处理呢，好，我们来走一遍

首先介绍下style-loader和css-loader，因为处理css文件之前必须要安装这两个模块，至于这俩是从哪冒出来的，请看[点击打开链接][Link 1]，这里详细介绍了各种loader的使用场景。

npm install css-loader style-loader

命令行安装成功后，我在src/css下面新建了common.css文件，并且在app.js中通过import引入，要成功引入并生效，需要修改webpack.config.js文件

![20170329121339972][]

好，运行webpack，你会发现common.css真的在生成的index.html中生效了

讲到这里，再给大家介绍一个神器——**postcss-loader**

先来看官网的介绍[postcss-loader官网介绍][postcss-loader]

老套路，先安装

npm install postcss-loader --save-dev

关于配置使用，官网也给了例子

![20170329123721359][]

好，参照官网的使用方法，我们如下配置

![20170329123856674][]

现在postcss-loader的配置基本完成了，是不是可以直接运行使用了呢，不，postcss是需要跟具体插件配合使用的，看官网[postcss plugins][]

官网中给我们列出了很多可用插件，也提到了当下 最受欢迎的一个——[Autoprefixer][] ，以此为例我们安装使用一下

npm install autoprefixer --save-dev

在这里我采用新建一个postcss.config.js文件的方式

![20170329150253395][]

运行webpack

![20170329150638397][]

好，我们看生成的index.html页面

![20170329150919149][]

好了，webpack处理css先说这么多，最重要的还是解决问题的思路和方式，具体的方法随着社区的完善在不断发生细微的变化，不管怎么变，官方文档的地址不变。

[  
][Autoprefixer]

[babel]: http://blog.csdn.net/u013344815/article/details/67637746
[Link 1]: http://webpack.github.io/docs/list-of-loaders.html
[20170329121339972]: /images/20220618/2181880e3fc541649064b8be28144da8.png
[postcss-loader]: https://github.com/postcss/postcss-loader
[20170329123721359]: /images/20220618/2c9eaed448d44dc787c8ebd22142fa08.png
[20170329123856674]: /images/20220618/869983cfb40b46e6b82dc166b7c710c3.png
[postcss plugins]: https://github.com/postcss/postcss#plugins
[Autoprefixer]: https://github.com/postcss/autoprefixer
[20170329150253395]: /images/20220618/06a1e4be4b234d7483a9f691945a9b60.png
[20170329150638397]: /images/20220618/ed5aa78a74a147b284ea2eae2cdba1d6.png
[20170329150919149]: /images/20220618/bc0153d641ec426caa77212e7d0c908a.png