How to include module level CSS in Angular JS

Question

I'm having angular project consist of Frontend and admin. I want to scale my project in such a way that I use different CSS for both admin and frontend.

Structure of my project is as follows:

--app
   --admin // Admin Module
     --admin.module.ts
     --admin.component.ts
     --admin-routing.module.ts
     --admin.component.css
     --admin.component.html

  --web // Frontend Module
     --web.module.ts
     --web.component.ts
     --web-routing.module.ts
     --web.component.css
     --web.component.html 

--app.module.ts
--app.component.ts
--app-routing.module.ts
--app.component.css
--app.component.html

I've defined my CSS for web(Frontend) in .angular-cli.json file.

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],

How can I load different CSS file for admin and the web? Also is there any better approach to include multiple modules in same project?

magento.stackexchange.com/questions/127523/…

user8317956
– user8317956

2017-08-31 12:52:24 +00:00
Commented Aug 31, 2017 at 12:52 — user8317956
– user8317956, Commented Aug 31, 2017 at 12:52

Vikhyath Maiya · Accepted Answer · 2017-08-31 12:38:26Z

2

You can define the global css properties that are common for both admin and remaining users in the "styles.css" file and admin specific & remaining user specific css properties could be defined in admin.component.css and web.component.css respectively;Hope this helps

answered Aug 31, 2017 at 12:38

Vikhyath Maiya

3,2123 gold badges39 silver badges71 bronze badges

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

4 Comments

Nehil Mistry Over a year ago

I tried importing css on module level - @import './assets/styles.css'; , still no results are reflected? What can be the reason

Vikhyath Maiya Over a year ago

where are you trying to do this import ?? You dont have to import any module level imports ..thats imported by default

Nehil Mistry Over a year ago

Consider I'm writing following css in web.component.css -

body {      font-family: Montserrat,Montserrat-Light,Montserrat-Regular,Montserrat-Bold,Montserrat-Black,sans-serif !important;     padding-top: 100px;  }

, No results is refected at web level

Vikhyath Maiya Over a year ago

please post update your code with web component and web component html and do you have any error on the console ?

user5929598 · Accepted Answer · 2017-08-31 13:02:26Z

0

If you have a main component for each module, you just have to attach the .css file to your component in the @Component() decorator.

@Component({
    templateUrl: './admin.component.html'
    styleUrls: ['./admin.component.css']
})

@Component({
    templateUrl: './web.component.html'
    styleUrls: ['./web.component.css']
})

answered Aug 31, 2017 at 13:02

user5929598

Collectives™ on Stack Overflow

How to include module level CSS in Angular JS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related