webpack加载css资源

最新推荐文章于 2024-08-05 09:54:19 发布

ThanatosY

最新推荐文章于 2024-08-05 09:54:19 发布

阅读量64

点赞数

分类专栏： webpack学习文章标签： webpack css 前端

本文链接：https://blog.csdn.net/Fight1124/article/details/135039946

版权

webpack学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Webpack的css-loader加载非JavaScript文件（如test.css），配置webpack.config.js中的loader规则，以及在HTML中应用导入的CSS。通过详细步骤展示了如何将CSS与JavaScript项目打包并实现代理样式效果。

摘要由CSDN通过智能技术生成

加载css资源

css-loader 加载器主要用于加载css等webpack不能识别的非js文件
该加载器会将css文件插入到打包输出的js文件中

新建一个test.css文件，并编写部分样式
.test {
 width: 100px;
 height: 100px;
 background-color: blue;
}

然后在main.js文件中引入该css文件

import count from './count.js'
import sum from './sum.js'
import './test.css'

console.log(count(2,1))
console.log(sum([1,2,3,4]))

然后下载loader插件，并配置loader的rules

执行npm install css-loader style-loader -D即可下载插件

然后在webpack.config.js中添加rules配置

module: {
 rules: [
     {
         test: /\.css$/, // 正则表达式，用于匹配需要加载的文件
         use: [ "style-loader", "css-loader"] // 使用的加载器插件模块，从右向左调用插件,注意使用双引号，单引号不识别会报错
     }
 ]
},

最后打包，并在html文件中编写相应样式的页面代码即可看到css文件的效果
<body>
 <h1>Hello</h1>
 <div class="test"></div>
</body>

最后运行打包命令npx webpack即可，刷新打开的项目网页即可看到效果

ThanatosY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack加载css资源

最后打包，并在html文件中编写相应样式的页面代码即可看到css文件的效果。然后在webpack.config.js中添加rules配置。然后下载loader插件，并配置loader的rules。新建一个test.css文件，并编写部分样式。然后在main.js文件中引入该css文件。即可，刷新打开的项目网页即可看到效果。
复制链接

扫一扫