Unable to use external css stylesheet in angular 9 project

Question

I'm new to angular and was trying to implement something with W3 CSS. I was trying to add this css to my project. Below are the steps I have followed

Ran npm install --save w3-css in my project directory
Added node_modules/w3-css/w3.css in angular.json

"styles": [
          "src/styles.css",
          "node_modules/w3-css/w3.css"
        ],

After that I tried adding css classes to my component html file

<div class="w3-container w3-border w3-large">
    <div class="w3-left-align"><p>Left aligned text.</p></div>
    <div class="w3-right-align"><p>Right aligned text.</p></div>
</div>

But I couldn't see any class added.

Note: node_modules folder and angular json are in same directory.

Show how you added the css in `angular.json` – David Jun 04 '20 at 18:57 — David, Jun 04 '20 at 18:57
@David updated the question – sadique urf arbaz Jun 05 '20 at 06:28 — sadique urf arbaz, Jun 05 '20 at 06:28
`"./node_modules/w3-css/w3.css"` try this – Vikas Jun 05 '20 at 06:30 — Vikas, Jun 05 '20 at 06:30

upinder kumar · Accepted Answer · 2020-06-05T07:06:45.877

3

import your css in style.css file.

@import "../node_modules/w3-css/w3.css";

edited Jun 05 '20 at 07:06

answered Jun 04 '20 at 16:29

upinder kumar

819
6
8

Hey, that worked, but will that not cause any issue during deployment ? – sadique urf arbaz Jun 05 '20 at 09:30
And can you tell me what can be the reason it's not working even though we add it in angular.json's style array ? – sadique urf arbaz Jun 05 '20 at 09:31
no its not cause any deployment issue. may be you are not import css file in correct place at angular.json file. – upinder kumar Jun 05 '20 at 09:47

Unable to use external css stylesheet in angular 9 project

1 Answers1