Require.js加载css依赖

最新推荐文章于 2025-09-11 07:48:39 发布

原创最新推荐文章于 2025-09-11 07:48:39 发布 · 8.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#requirejs #require.js #css依赖

requirejs 同时被 2 个专栏收录

3 篇文章

订阅专栏

模块化

3 篇文章

订阅专栏

本文介绍如何使用RequireJS加载CSS文件的方法，包括普通CSS依赖、jQuery插件CSS依赖及定义模块CSS依赖等不同场景下的配置与调用示例。

首先下载require-css 里的css.js到文件目录
下载地址：https://github.com/guybedford/require-css

普通css依赖加载

//配置
require.config({
    map: { //map告诉RequireJS在任何模块之前，都先载入这个css模块
        '*': {
            css: 'lib/css'
        }
    },
    paths: {
        test: 'lib/test',
    },
    shim: {
        test: ['css!../css/test.css'] //shim在这里表示test模块在加载之前需要先加载test.css这个样式文件
    },
});

//调用
require(['test'], function(test) {

});

jquery插件css依赖加载

//配置
require.config({
    map: { //map告诉RequireJS在任何模块之前，都先载入这个css模块
        '*': {
            css: 'lib/css'
        }
    },
    paths: {
        jquery: 'lib/jquery-2.1.1.min',
        'jquery.bootstrapTable': 'lib/shim/bootstrap-table/bootstrap-table',
    },
    shim: {
        'jquery.bootstrapTable': {
            deps: [
                'css!lib/shim/bootstrap-table/bootstrap-table.css', //css!声明样式依赖
                'jquery' //插件依赖jquery
            ]
        }
    },
});

//调用
require(['jquery.bootstrapTable'], function(test) {

});

定义模块CSS依赖加载

//模块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'], function(test) {

});