require引入html,require能引入CSS吗?

require能引入CSS,那么如何引入CSS?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

1caf816436bc936d367e5c769e154c47.png

使用require模块化开发时,在require.config配置中,定义模块的引入路径时,有些是需要依赖css的,这个时候需要通过require-css插件,在github上可以下载到地址:https://github.com/guybedford/require-css。通过这个地址下载下来会有很多,如下图,我们只要css.js/css.min.js文件即可。

37c9cab7401179406b617641fade39f1.png

2. 在require.config配置中加入如下图的配置:

db0bcd622e4328bb5fc2f00e60d3fce5.png

3. 完成上面两部之后,就可以在require.config配置中shim增加依赖,在加载ELEMENT的时候需要提前加载index.css。写法如下:shim:{

"ELEMENT": {

"deps": ["vue", "css!assets/vue/element-ui/lib/theme-chalk/index.css"]

}

},

4. 上面解决了,模块依赖css的问题,但是有时候还需要单独引入某个css的时候,当然啦,可以直接拖到html页面中加载。但是如果不想这样做的话,这个时候就可以通过改写require.config的写法来实现,将require的配置写成一个变量,然后在页面中在初始化,如下图:

eedaadcac3f7acb458ae0c44596787a4.png

要实现上图写法,首先要准备一个base.js文件,这个文件中只需要写document.body.style.visibility = 'visible';这么一句话就可以了(也可以写其他的),然后在requireConfig配置的同一个js中增加一个方法,用来向base的依赖中增加css,写法如下图红框。

然后在页面上调用require_css方法传入css地址,这样css将会引入到页面中,写法如下:

98e5652a1b345096acca35e83620b0e9.png这样就大功告成了。

更多前端开发知识,请查阅 HTML中文网 !!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值