如何使用requirejs加载css？

Question

这是我的 requirejs 配置文件。我在基于 angular 的项目中使用 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

取自requirejs documentation:

Since knowing when the file has loaded is not reliable, it does not make sense to explicitly support CSS files in RequireJS loading, since it will lead to bug reports due to browser behavior. If you do not care when the file is loaded, you can easily write your own function to load CSS on demand by doing the following:

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 一样简单：

• 安装 require-css 和 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
  });
  

Answer 2

我宁愿建议您使用 ocLazyLoad 做一些不同的事情。

参考我的回答

按照上面link的初始步骤进行配置

我建议您在您的 Controller 文件中使用这种方式，如下所示

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

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

});
})();

LIVE DEMO

注意：演示中点击菜单->点击主页