requirejs加载css样式表
2024-08-25 06:23:42
1.
在 https://github.com/guybedford/require-css 下载到require-css包
2.
把css.js或者css.min.js复制到项目的js目录下
3.
在require.config配置map
map: { '*': { 'css': 'require/css' } }
4.配置css依赖:
直接在shim的deps节点配置需要的css文件
shim: { bootstrap: { deps: [ 'jquery', 'css!../../bootstrap.min.css' ] }, bootbox: { deps: ['jquery', 'bootstrap'] }, bootdatetime: { deps: [ 'jquery', 'bootstrap', 'css!../../datetimepicker' ] } }
以css!开头,路径为相对路径
5.调用代码
require(['../app/base'], function () { require(['home_index']); }); define('home_index', ['domReady', 'jquery', 'bootstrap'], function (ready, $, bootstrap) { ready(function () { //do something }) });
这样便可以自动加载bootstrap.min.css
6.base.js完整代码
var pathToJQuery if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { pathToJQuery = 'jquery/jquery-2.1.1.min' } else { pathToJQuery = 'jquery/jquery-1.11.1.min' } require.config({ baseUrl: '/content/js/lib', map: { '*': { 'css': 'require/css' } }, paths: { app: '../app', jquery: pathToJQuery, domReady: 'require/domReady', json: 'common/json2', jqTmpl: 'tmpl/jquery.tmpl.min', pagination: 'pagination/jquery.twbsPagination.min', unslider: 'unslider/unslider.min', bootstrap: 'bootstrap/bootstrap.min', bootbox: 'bootstrap/bootbox.min', bootdatetime: 'bootstrap/bootstrap-datetimepicker.min', }, shim: { unslider: { deps: [ 'jquery' ] }, marquee: { deps: ['jquery'] }, bootstrap: { deps: [ 'jquery', 'css!../../bootstrap.min.css' ] }, bootbox: { deps: ['jquery', 'bootstrap'] }, bootdatetime: { deps: [ 'jquery', 'bootstrap', 'css!../../datetimepicker' ] } } });
最新文章
- applicationContext.xml
- 基于jQuery的自适应图片左右切换
- JAVA之IO流(字节流)
- Fedora 23 忘记root密码
- 在SQL Server 2014里,如何用资源调控器压制你的存储?
- 关闭 Flash 沙箱安全模式,解决浏览器高占用
- VS打包
- 尝鲜党:Nexus5、6刷安卓M教程
- NSData、NSString 、 NSFileManager
- selenium + firefox/chrome/phantomjs登陆之模拟点击
- Redis数据库及其基本操作
- Sublime text3所遇到的问题
- 利用efi功能更改bios主板被隐藏的设置(如超频)
- BSUIR Open Finals
- ABAP其实也是挺好的语言
- 【Asia Yokohama Regional Contest 2018】Arithmetic Progressions
- 使用css时的一些技巧及注意事项
- [UE4]Border
- c# 共享事件处理程序
- 14.Java集合简述.md
热门文章
- 多节点ssh免密匙登录
- Centos 7 mysql Buffered warning: Changed limits: max_connections: 214 解决方法
- 将HTML5封装成android应用APK文件的几种方法(转载)
- oracle细节
- HTML5&;CSS3练习笔记(一)
- 使用bat/vbs/ahk对Windows下进行自动化操作
- WP 手机Lumia 820 锁屏密码的破解研究
- dataGridViewX和数据库的链接之dataGridViewX1.DataSource = ds.Tables[0];
- [已解决] 快速理解RSA算法
- js 判断移动设备、pc端、android、iPhone、是否为微信、微博、qq空间