CODEWITHSUNDEEP
htmlangularsassdirectory-structure
Ismail
Ismail

Reputation: 1

Angular's main html file can't use the styles.scss file inside the src/styles folder

I'm new to Angular.

In order to use the 7-1 scss pattern in my project, I created a styles folder inside the src folder "src/styles", and linked the components to the src/styles/style.scss and it works fine.

The problem I'm having now is that the html and body elements within the main index.html file aren't affected by these styles.

Here's a look at my directory structure

I tried importing the styles needed inside the src/styles.scss file and it worked but I don't want to repeat my code.

  1. Wanted behavior:

    The main index.html can use the scss styles inside the "src/styles/styles.scss" I created with no problem.

  2. Actual behavior:

    The main index.html can only access the default style.scss folder by default

How can I fix this so that the elements inside the index.html can use the styles from within my styles folder without having to repeat my work twice?

Edit: the problem occurs despite the already made changes to the angular.json file as you can see here

Thank you in advance

Upvotes: 0

Views: 2979

Answers (4)

Ismail
Ismail

Reputation: 1

Solved. I was able to solve the problem by importing all the sass files from the src/styles into the main styles.scss file.

Upvotes: 0

Darshan Malani
Darshan Malani

Reputation: 476

npm run build after paster below command "npm start" make sure You can find screenshot

enter image description here

Upvotes: 0

Syed Khizaruddin
Syed Khizaruddin

Reputation: 435

you need to add your src/styles/styles.css inside angular.json

there is style object

{ 
  "projects":{
   "yourProjectName": {
     "architect":{
       "build:{
        "options":{
          "assets":[...],
          "styles": [
           "src/styles/styles.scss",
          ]
//..rest of config
        }
      }
    }
  } 
}

Note: After adding please restart your local development server or if in production re-deploy, to see changes

Upvotes: 1

Jai
Jai

Reputation: 74738

You can add styles in the angular.json. You can find styles array in the file and add the path of the style.

enter image description here

Upvotes: 1

Related Questions