使用webpack打包样式资源需要用到比较多的loader,而且这些loader的顺序不能乱,遵循从右到左、从下到上的解析规则。
经过上一篇的文章,已经学习了使用webpack来打包图片文件,这一节就到了写如何使用webpack打包样式文件的时候了。虽然使用的loader比较多,但是只要按照顺序把loader写好,然后正确配置loader,其实样式文件的解析并不难。
本文首先从最简单的css文件解析入手,然后到scss文件解析,再到css3新特性自动加前缀一一进行学习。
打包css文件
现在有个目的,就是想给上一篇文章中的图片加上宽度、高度的样式。
1、在src目录下新建一个css文件夹,在里面新建一个index.css文件。
index.css
.img {
width: 100px;
height: 100px;
}
现在的目录如下:
2、然后打开image.js文件,引入刚才新建的css文件。为img标签添加类。
image.js
3、配置webpack.config.js
因为css样式文件的后缀是.css,所以需要使用到style-loader、css-loader进行解析。
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js'
},
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',