Angular 的主 html 文件不能使用 src/styles 文件夹中的 styles.scss 文件

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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