使用Loader打包静态资源---样式（上）

使用Loader打包静态资源—样式（上）

写网页的时候我们，我们肯定会再项目中写CSS样式，我们先建一个index.css文件，放在src目录下，

并在index.js中导入，并给图片添加样式

此时我们运行npm run bundle打包命令，控制台报错

你需要一个合适的加载器来处理这个文件

很明显，我们需要css-loader来处理这个文件，先进行安装

cnpm install css-loader --save-dev

安装完成之后，对 wepack.config.js文件进行配置

配置完成之后，再次运行 npm run bundle 命令打包

打包成功，点开bundle下面的index.html文件查看内容，发现图片样式没有发生变化，而且控制台也不报错。审查元素发现图片上确实有一个 class="avatar" 的类名，但是样式没有生效

因为css-loader只负责解释导入css样式文件，导入 后再解析(resolve)它们。而要将解析后的css文件注入dom，我们还需要使用style-loader。安装style-loaer，并在 webpack.config.js 中配置

cnpm install style-loader --save-dev

注意：这里的loader的顺序不能错，webpack是从下到上，从右到左执行，先用css-loader解释css样式文件，再用style-loader注入dom
再执行一次打包命令，我们的图片样式就成功的出来了

使用loader处理scss，less等文件

但是写过vue框架的同学一般的习惯使用sass，less这种css预处理器，对于这种文件我们又是如何打包的呢？新建一个index.scss文件

然后将index.js中的引用换成index.scss，执行打包命令报错

还是原来的配方，还是原道的味道，你需要一个合适的处理器

从这里开始看就可以了，node-sass的包很难下载成功

参考webpack官网，打包sass我们需要sass-loader和node-sass。
安装先

cnpm install sass-loader --save-dev
cnpm install node-sass --save-dev

webpack进行如下配置将style-loader 和 css-loader 与 sass-loader 链式调用，可以立刻将样式作用在 DOM 元素。

打包之后，成功添加样式

添加前缀

在添加css3的属性时，我们一般会对其添加不同的厂商前缀，保证兼容性。自己去手动添加会很麻烦，我们可以利用postcss-loader和autoprefixer插件来智能添加前缀。
首先安装它们，然后添加配置文件postcss.config.js：

 cnpm install postcss-loader --save-dev
 cnpm install autoprefixer --save-dev

然后添加配置文件postcss.config.js：

修改webpack.config.js

打包之后运行

发现样式生效，但是并没有添加前缀，查阅文档得知，我们还需要指定支持浏览器的版本

此时打包后运行，样式签注就出来了