如何使用requirejs加載CSS？

Question

這是我的requirejs配置文件。 我在基於角度的項目上使用require js。 如果我可以用requirejs加載CSS，那么我也可以組織CSS文件！ 我是requirejs概念的新手。 任何幫助表示贊賞

require.config({
    paths:{
        'angular'       : "agular",
        'app'           : 'app',
        'coreModel'     : 'coreModel',
        'test'          : 'controller/test'
    },
    shim: {
        'app' : {
            deps :['angular','coreModel',]
        },

        'coreModel' : {
            deps : ['angular','test']
        },
        'test' : {
            deps : ['angular',]
        }
    },
});

require(['app',],function(){
    angular.bootstrap(document,['app']);
});

這是我的主要控制者

define(function(){

    var coreModel = angular.module('coreModel',['test']);

    coreModel.controller('mainController',function($scope){
        $scope.test = "Hello World";
    });
});

如何使用requirejs加載CSS？

Answer 1

我寧願建議您使用ocLazyLoad進行其他操作。

在這里參考我的答案

請按照上述鏈接的初始步驟進行配置

我建議您在以下Controller文件中使用這種方式

(function () {
    angular.module('myApp').controller("homeCtrl", function ($ocLazyLoad,$scope) {

          //this line loads your styles and apply it 
          $ocLazyLoad.load('style.css');

});
})();

現場演示

注意：在演示中，單擊菜單->單擊主頁

Answer 2

取自requirejs文檔 ：

由於不知道何時加載文件是不可靠的，因此在RequireJS加載中明確支持CSS文件是沒有意義的，因為由於瀏覽器行為而導致錯誤報告。 如果您不關心何時加載文件，則可以通過以下操作輕松編寫自己的函數以按需加載CSS：

function loadCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

---

但是您可以使用requirecss使其像requirejs一樣簡單：

• 使用bower install require-css

• 配置您的應用程序

   map: { '*': { 'css': 'require-css/css' // or whatever the path to require-css is } } 

• 就像在requirejs中一樣為requirecss添加文件

   define(['css!styles/main'], function() { //code that requires the stylesheet: styles/main.css });