大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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样式中设置的颜色
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/164849.html原文链接：https://javaforall.net
