webpack(5)webpack处理css文件
css文件处理-准备工作
(以下项目配置都是基于上一篇webpack(4)
的基础上)
在项目开发中,我们必然需要添加很多的样式,而样式我们往往写到一个单独的文件中。
这里我们就在src
目录中创建一个normal.css
文件,代码如下:
body{
background-color: aqua;
}
代码很简单,就是将body
设置一个背景颜色,但是此时样式是不会生效的,因为我们根本没有引用它,所以我们需要在入口main.js
中引入css
// 引用css文件
require('./css/normal.css')
安装loader并配置
准备工作处理完后,我们需要安装2个loader
style-loader
将模块导出的内容作为样式并添加到DOM
中css-loader
加载CSS
文件并解析import
的CSS
文件,最终返回CSS
代码
安装命令如下:
npm install --save-dev style-loader css-loader
安装完成后我们还需要在webpack.config.js
文件中进行配置
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
}
注意:这里use
列表中的2个loader
顺序是不能互换的,因为loader
是从右到左(或从下到上)地取值(evaluate)/执行(execute)。所以上面的示例是先执行css-loader
加载样式文件后,再执行style-loader
实践结果
最后我们使用npm run build
就可以打包成功,然后访问index.html
,页面呈现的颜色就是我们normal.css
样式中设置的颜色