1.
Download to Require-css package in Https://github.com/guybedford/require-css
2.
Copy the Css.js or css.min.js to the JS directory of the project.
3.
Configuring the map in Require.config
map: { ' * ': { ' css ': ' Require/css ' } }
4. Configure CSS dependencies:
Configure the required CSS files directly on the shim deps node
Shim: { bootstrap: { deps: [ ' jquery ', ' CSS!.. /.. /bootstrap.min.css ' }, Bootbox: { deps: [' jquery ', ' Bootstrap '] }, Bootdatetime: { deps: [ ' jquery ', ' Bootstrap ', ' CSS!.. /.. /datetimepicker ' } }
Start with css!, path is relative path
5. Calling code
function () { require ([' Home_index ');}); Define (function (Ready , $, bootstrap) {Ready ( ) { // do something });
This will automatically load the BOOTSTRAP.MIN.CSS
6.base.js Complete code
varPathtojqueryif(' Queryselector 'inchDocument&& ' Localstorage 'inchwindow&& ' AddEventListener 'inchwindow) {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 Loading CSS style sheets