How to load css by using requirejs?

Question

This is my requirejs config file. I'm using require js on my angular based project. If I could load css with requirejs I would be able to organize my css files too! I'm new to requirejs concept. Any help appreciated

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']);
});

This is my main controller

define(function(){

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

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

How can I load css with requirejs ?

is there any simple documentation or tutorial on web for require-css ? , — Shabeeb Ck, Mar 01 '17 at 17:20
https://github.com/guybedford/require-css/tree/master/example — lin, Mar 01 '17 at 17:58

score 4 · Accepted Answer · edited May 23 '17 at 12:31

4

I would rather suggest you to something different using a ocLazyLoad.

Reference to my answer here

Follow the initial steps of the above link for configuration

I would suggest you to use this way in your Controller file as below

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

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

});
})();

LIVE DEMO

Note: In the demo click on the menu- > click home

edited May 23 '17 at 12:31

Community

1
1

answered Mar 01 '17 at 18:43

Aravind

40,391
16
91
110

Happy to help you :) – Aravind Mar 01 '17 at 18:46
Oh yea, this is much better! – lin Mar 01 '17 at 18:56
doesn't answer OP – catbadger Jun 19 '17 at 19:02
@catbadger then what is answer to OP? – Aravind Jun 20 '17 at 01:51

lin · Answer 2 · 2017-03-01T13:42:14.973

Taken from the 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);
}

But you can use requirecss to make it work as simple as requirejs does:

Install require-css with bower install require-css

Configurate your application

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

Add your files for requirecss like you did it in requirejs

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

How to load css by using requirejs?

2 Answers2

Linked