webpack总结（3）处理项目中的css （less—css，sass—css）

安装style- loader css-loader

新建css文件夹，新建common.css文件

webpack把任何资源都视为模块，在入口文件app.js中引入需要的模块（可以require方式引用，此处我们统一用es6的import方式引用）

在webpack.config.js中，配置css的loader，loader之间用！号串联起来

npm run webpack 打包，页面成功加载css文件。

postcss-loader

postcss-loader针对webpack打包使用的loader， css后处理器，官方解释：

安装postcss-loader

安装 加浏览器前缀的这个postcss的插件。。。

在webpack.config.js中，添加postcss-loader，loaders数组中的处理顺序是从右到左 

postcss的插件autoprefixer 怎么使用呢？

旧版本的postcss方式（大同小异），传入broswers对象，自动加前缀，兼容浏览器最近5个版本。

打包后结果果真自动加了前缀，postcss的插件已经生效了

如果在css文件中import又一css文件，打包后页面中生成2个style标签，import进来的css并没有加载postcss-loader，怎么解决呢？

？后面传入参数，表示在css-loader之后（？号之后），指定几个数量的loader来处理import进来的资源，css-loader之后只有一个postcss-loader，来处理css文件中import又一css资源

import进来的css成功加载postcss-loader

less

如要打包的项目中引用了less，npm安装less，再按照less-loader

npm install less

npm install less-loader --save-dev

安装成功后，在webpack.config.js的module-loaders中新增匹配规则