CODEWITHSUNDEEP
angularsass
Sandeep Gupta
Sandeep Gupta

Reputation: 7250

SCSS file imports using ~ (tilde) is not working in Angular 6

I have two question regarding scss file imports in Angular6

  1. Do I need to import my partials in all of my component.scss files after having imported it once in global src/sass/styles.scss. Shouldn't importing it once be enough?
  2. How do I import SCSS partials using import shortcut ~ ? All my partials are contained in src/sass folder.

This is fine: @import '../sass/variables';//in app.component.scss

But this throws error: @import '~sass/variables':

ERROR in ./src/app/app.component.scss Module build failed: @import '~sass/variables'; ^ File to import not found or unreadable: ~sass/variables. in C:\Users\sandeepkumar.g\Desktop\nodebook\tdlr-this\src\app\app.component.scss (line 2, column 1)

`

angular.json:

"styles": [
              ...
              "src/sass/styles.scss"
            ],

My folder structure:

enter image description here

Upvotes: 9

Views: 12611

Answers (1)

Sandeep Gupta
Sandeep Gupta

Reputation: 7250

Answering my own question. It turns out both of these problems are "bug" in Angular 6.

  1. Yes, if you want to use any .scss file code in any component.scss, they have to be imported in that component.scss. Issue.
  2. ~ (Tilda) has stopped working since Angular6. Issue. Use ~src instead to import scss.

Upvotes: 15

Related Questions