require.js引入css文件,requirejs 加载独立的css文件

使用requireJS的时候需要加载自定义css文件，下面是一个方法：(function () {

requirejs.config({

paths: {

jquery   : 'lib/jquery-1.11.1.min',

Template : 'Component/util/Template',

Button   : 'Component/view/button/Button',

Canvas   : 'Component/view/canvas/Canvas',

Container: 'Component/view/container/Container'

},

/**

* 设置css.js文件路径

*/

map  : {

'*': {

'css' : 'lib/css'

}

},

/**

* 样式按照需要加载加载 键值名和加载模块的名称一致，目的是加载模块时加载对应的css样式

*/

shim : {

'Canvas1': ['css!./Component/view/canvas/css/login.css'],

'Button' : ['css!./Component/view/button/css/ty-main.css']

}

});

define(function (require) {

var $ = require('jquery');

$(document).ready(function () {

var container = new (require('Container'))({

id    : 'container',

name  : 'container',

width : '300px',

height: '500px',

render: $('body')

});

var canvas = new (require('Canvas'))({

id       : 'Canvas',

name     : 'Canvas',

//render   : $('body'),

listeners: {

onReady: function (_this) {

var ctx = _this.getContext2D();

ctx.fillStyle = '#FF0000';

ctx.fillRect(0, 0, 80, 100);

},

click  : function () {

alert(1);

}

}

});

container.add(canvas);

});

});

})();

这里看注释就能知道，所加载的css文件应该是依赖于js模块的，所以如果你的css文件不依赖于一个js模块或者你找不到依赖的模块(-_-||)，那就只能把它加到一个你的文件用到的模块里了，比如bootstrap模块，例如你想加载一个menu.css文件，你可以这么写：shim: {

'bootstrap': ['jquery','css!../css/wechat/menu'],

}

这样就能把不属于任何模块的css文件成功加载了。