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
– Shabeeb Ck, Commented Mar 1, 2017 at 17:20

Community · Accepted Answer · 2017-05-23 12:31:52Z

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, 2017 at 12:31

CommunityBot

11 silver badge

answered Mar 1, 2017 at 18:43

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aravind Over a year ago

Happy to help you :)

lin Over a year ago

Oh yea, this is much better!

catbadger Over a year ago

doesn't answer OP

Aravind Over a year ago

@catbadger then what is answer to OP?

lin · Accepted Answer · 2017-03-01 13:42:14Z

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

Collectives™ on Stack Overflow

How to load css by using requirejs?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related