web项目html引入css文件路径,详解Webpack和Webpack-simple中如何引入CSS文件_旧店_前端开发者...

博主最近研究

首先说一下如何在webpack中引入

a90dda76cb6f0d71ec5d385d82e274e3.png

之后在App.vue文件中在style标签项目写入你想要引入的样式:

44d8fc40add0a91629276ff1b4cc21cc.png

本例引入的样式是一个名为nam.css的文件,该文件只是让页面变蓝,之后运行即可。

d1422522d960c97ac0a4974eb1758176.png

再来说一下webpack-simple是如何引入css文件的。webpack-simple从名字就可以看出他是一个简化版,在webpack中即使不下载style-loader,不在webpack.base.conf.

首先是下载webpack-simple,如上面一样操作下载。下载完后需要在该项目目录下键入npm install css-loader style-loader –save-dev,下载完后要在webpack.config.

f51d5a7418d3ce87c21a1e157841b86e.png

注意,use里面的顺序不能反过来,否则会报错。

之后在src/assets/main.

import './assets/blue.css'

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持前端开发者。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值