requirejs添加css引入

1. 使用require模块化开发时，在require.config配置中，定义模块的引入路径时，有些是需要依赖css的，这个时候需要通过require-css插件，在github上可以下载到地址：https://github.com/guybedford/require-css。通过这个地址下载下来会有很多，如下图，我们只要css.js/css.min.js文件即可(如果不想下载的话，可以拖到文章最下面，我放了css.min.js的代码)。

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

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的配置写成一个变量，然后在页面中在初始化，如下图：

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

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

这样就大功告成了。

css.min.js代码：

define(function(){if("undefined"==typeof )return{load:function(a,b,c){c()}};var a=document.getElementsByTagName("head")[0],b=window.navigator.userAgent.match(/Trident\/([^ ;]*)|AppleWebKit\/([^ ;]*)|Opera\/([^ ;]*)|rv\:([^ ;]*)(.*?)Gecko\/([^ ;]*)|MSIE\s([^ ;]*)|AndroidWebKit\/([^ ;]*)/)||0,c=!1,d=!0;b[1]||b[7]?c=parseInt(b[1])<6||parseInt(b[7])<=9:b[2]||b[8]?d=!1:b[4]&&(c=parseInt(b[4])<18);var e={};e.pluginBuilder="./css-builder";var f,g,h,i=function(){f=document.createElement("style"),a.appendChild(f),g=f.styleSheet||f.sheet},j=0,k=[],l=function(a){g.addImport(a),f.οnlοad=function(){m()},j++,31==j&&(i(),j=0)},m=function(){h();var a=k.shift();return a?(h=a[1],void l(a[0])):void(h=null)},n=function(a,b){if(g&&g.addImport||i(),g&&g.addImport)h?k.push([a,b]):(l(a),h=b);else{f.textContent='@import "'+a+'";';var c=setInterval(function(){try{f.sheet.cssRules,clearInterval(c),b()}catch(a){}},10)}},o=function(b,c){var e=document.createElement("link");if(e.type="text/css",e.rel="stylesheet",d)e.οnlοad=function(){e.οnlοad=function(){},setTimeout(c,7)};else var f=setInterval(function(){for(var a=0;a<document.styleSheets.length;a++){var b=document.styleSheets[a];if(b.href==e.href)return clearInterval(f),c()}},10);e.href=b,a.appendChild(e)};return e.normalize=function(a,b){return".css"==a.substr(a.length-4,4)&&(a=a.substr(0,a.length-4)),b(a)},e.load=function(a,b,d,e){(c?n:o)(b.toUrl(a+".css"),d)},e});window