require js（四） 按需加载css

前面也讲到了，我是用require做单页面应用，这个呢就有可能会涉及某个具体页面需要为他写一个具体的css样式。但是我又不想全局引入，减少初始加载依赖，所以就需要按需加载css这个东西。

因为按需加载css又涉及到处理css文件，所以我们需要引入一个js文件：require-css

基础

配置项 baseConfig.js

map: { //map告诉RequireJS在任何模块之前，都先载入这个css模块
    '*': {
        css: 'lib/css'
    }
},
path:{
	'css': ["../../asset/require/css.min"],
}
shim: {
	test:['css!../css/1.css']
}

这里就是表面你在加载test.js的时候会同时加载1.css这个文件，js的按需加载我们是无比的熟悉，这就让我们只需要去在我们需要的页面加载js就行了，他会自动为你同时加载css。

使用的时候只需要

require(['test'])

即可

其他

//模块test.js
define(['css!../css/test.css'], function() { //先加载依赖样式
    var test = {};
    return test;
});

//配置
require.config({
    map: { //map告诉RequireJS在任何模块之前，都先载入这个模块
        '*': {
            css: 'lib/css'
        }
    },
    paths: {
        test: 'lib/test',
    }
});

//调用
require(['test'])