首页 > 代码库 > requirejs加载css样式表
requirejs加载css样式表
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 pathToJQueryif (‘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‘ ] } }});
requirejs加载css样式表
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。