Question

我需要每个视图在导航到视图时加载它自己的css文件。目前已经加载了css文件（我可以在网络部分看到它加载）但它不会影响页面样式

任何想法？

define([
    'jquery',
    'text!../templates/Login.html',
    'text!../css/styleshet.css'
], function($, html, css){      

});

Answer 1

显然你需要手动将它添加到你的页面...... 固定的是：

define([
    'jquery',
    'text!../templates/Login.html',
    'text!../css/styleshet.css'
], function($, html, css){      

//this will remove the old view css 
if ($("#customCss").length > 0)
            $("#customCss").empty();

//this will add the current css to the page 
 $('head').append('<style type="text/css" id="customCss"> ' + css + '</style>');

});

感谢Radek Michna

Answer 2

在main.js（ requirejs 脚本代码的data-main属性中描述的文件）中：

(function(){        
    requirejs.config({
        baseUrl: 'ASSETS',
        paths: {
            YOURJS: 'PATH/TO/JS/YOURJS'
        },
        shim: {
            "YOURJS": {
                "deps": ['css!PATH/TO/CSS/YOURCSS']
            },
        }
    });
})();

在同一目录css.js选项中创建baseUrl文件：

define({
    load: function (url, req, onLoad, config) {
        var head  = document.getElementsByTagName('head')[0];
        var link  = document.createElement('link');
        //link.id   = ;
        link.rel  = 'stylesheet';
        link.type = 'text/css';
        link.href = config.baseUrl+url+'.css';
        link.media = 'all';
        head.appendChild(link); 
        onLoad();                       
    }       
});

如何使用requireJs＆amp ;;加载动态视图css文件骨干

2 个答案: