什么是loader、项目中安装loader、使用loader管理css格式文件
1、什么是loader?
可以加载和使用项目中的css文件
https://www.webpackjs.com/concepts/loaders/
1.1、css文件处理-准备工作
1.2、css文件处理介绍:css-loader
1.3、css文件处理介绍:style-loader
1.4、在项目中安装样式的loader
webpack中文网站样式的loader参考
在终端中使用以下命令安装
npm install --save-dev css-loader@2.0.2
npm install --save-dev style-loader@0.23.1
package.json中控制loader版本
在webpack.config.js中查看,安装成功
1.5、案例:如何在项目中使用loader管理css样式文件
1、首先新建css文件normal.css
body {
background-color: aqua;
}
2、main.js中引入该css文件
3、打开vscode终端,安装loder
注意loader版本号
npm install --save-dev css-loader@2.0.2
npm install --save-dev style-loader@0.23.1
4、下载成功
5、配置
css-loader负责加载样式、style-loader负责使用样式
6、使用命令打包
npm run build
7、浏览器访问index.html
css样式引入成功
goodbye happiness: 老哥解决了吗
charspan: 请问你的那个管理工具是什么?
CSDN-Ada助手: 恭喜你这篇博客进入【CSDN月度精选】榜单,全部的排名请看 https://bbs.csdn.net/topics/619340597。
CSDN-Ada助手: 恭喜你这篇博客进入【CSDN月度精选】榜单,全部的排名请看 https://bbs.csdn.net/topics/619339673。
mxjccut: 不需要手动控制么 这个场景不需要考虑么