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

1. Ran npm install --save w3-css in my project directory
2. 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.

Answer 1

import your css in style.css file.

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