Import scss files from src/assets/ into a component scss file

Question

I have some scss files in src/assets/ap/scss/:

src/
..app/
..assets/
....ap/
......bootstrap/
......scss/
........variable.scss
........grid.scss
........responsive.scss
........style.scss

In src/assets/ap/scss/style.scss:

// depending on the solution, I imagine these need to be updated
@import 'src/assets/ap/scss/variable';
@import 'src/assets/ap/scss/grid';
@import 'src/assets/ap/scss/responsive';

In one of my components, I would like to import them like this:

// home.component.scss
// depending on the solution, I imagine this needs to be updated
@import './src/assets/ap/scss/style';

// home.component.ts
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: [
      '../../assets/ap/bootstrap/css/bootstrap.min.css',
      './home.component.scss'
   ]
})

In angular.json:

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
},

...

"assets": [
  "src/favicon.ico",
  "src/assets"
],
"styles": [
  "src/styles.scss"
],

This all compiles fine, but when I load my page, the scss styles aren't present. It seems that the assets folder aren't being linked up properly. Any advice?

Answer 1

In your angular.json your styles is pointing to "src/styles.scss" i think you should point to "src/assets/ap/scss/style.scss" instead.

"styles": [
  "src/assets/ap/scss/style.scss"
],

Answer 2

You can add the path in your angular.json file as:

        "stylePreprocessorOptions": {
          "includePaths": [
            "src/assets/css"
          ]
        },

Check more in this page