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
– David

2020-06-04 18:57:19 +00:00
Commented Jun 4, 2020 at 18:57 — David
– David, Commented Jun 4, 2020 at 18:57
@David updated the question

sadique urf arbaz
– sadique urf arbaz

2020-06-05 06:28:08 +00:00
Commented Jun 5, 2020 at 6:28 — sadique urf arbaz
– sadique urf arbaz, Commented Jun 5, 2020 at 6:28
"./node_modules/w3-css/w3.css" try this

Vikas
– Vikas

2020-06-05 06:30:01 +00:00
Commented Jun 5, 2020 at 6:30 — Vikas
– Vikas, Commented Jun 5, 2020 at 6:30

upinder kumar · Accepted Answer · 2020-06-05 07:06:45Z

3

import your css in style.css file.

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

edited Jun 5, 2020 at 7:06

answered Jun 4, 2020 at 16:29

upinder kumar

8376 silver badges8 bronze badges

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

3 Comments

sadique urf arbaz Over a year ago

Hey, that worked, but will that not cause any issue during deployment ?

sadique urf arbaz Over a year ago

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 ?

upinder kumar Over a year ago

no its not cause any deployment issue. may be you are not import css file in correct place at angular.json file.

Collectives™ on Stack Overflow

Unable to use external css stylesheet in angular 9 project

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related