大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
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样式中设置的颜色
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/166092.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
