CODEWITHSUNDEEP
cssangularsass
Or Yaacov
Or Yaacov

Reputation: 3880

Sass failed to import using "~" from the node_modules folder

I'm using Angular 6 to develop a single page web application, and I added the following ngx-toast library to my project.

when I added the following Sass into my project and when I used "~" instead of the relative path it failed to load the libraries:

   // regular style toast 
@import '~ngx-toastr/toastr.css';

// bootstrap style toast 
// or import a bootstrap 4 alert styled design (SASS ONLY) 
// should be after your bootstrap imports, it uses bs4 variables, mixins, functions 
@import '~ngx-toastr/toastr-bs4-alert';

// if you'd like to use it without importing all of bootstrap it requires 
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~ngx-toastr/toastr-bs4-alert';

but it's work when I'm using the relative path:

// regular style toast 
@import '../../node_modules/ngx-toastr/toastr.css';

// bootstrap style toast 
// or import a bootstrap 4 alert styled design (SASS ONLY) 
// should be after your bootstrap imports, it uses bs4 variables, mixins, functions 
@import '../../node_modules/ngx-toastr/toastr-bs4-alert';

// if you'd like to use it without importing all of bootstrap it requires 
@import '../../node_modules/bootstrap/scss/functions';
@import'../../node_modules/bootstrap/scss/variables';
@import '../../node_modules/bootstrap/scss/mixins';
@import '../../node_modules/ngx-toastr/toastr-bs4-alert';

my component modules 

   @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

of course that I can leave it like that, or just download the actual css from the manual, but it's bothering me that's it's fails to import since it should work.

any solutions?

Upvotes: 2

Views: 4565

Answers (2)

Dickens A S
Dickens A S

Reputation: 4054

As per latest angular 18, I faced same problem, I fixed it by simply removing the ~ symbol

Code which shows error

@import '@angular/material/prebuilt-themes/indigo-pink.css';
@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~perfect-scrollbar/css/perfect-scrollbar.css';

What is the error

[1] Could not resolve "~bootstrap/dist/css/bootstrap.min.css"

What info given after the error

[1] You can mark the path "~bootstrap/dist/css/bootstrap.min.css" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

Fixed code

@import '@angular/material/prebuilt-themes/indigo-pink.css';
@import 'bootstrap/dist/css/bootstrap.min.css';
@import 'perfect-scrollbar/css/perfect-scrollbar.css';

Regarding ngx-toastr/toastr.css it does not declare files in that package.json, this cannot be imported in your css or scss, therefore it should be imported via angular.json

"styles": [
   "src/styles.scss",
   "node_modules/ngx-toastr/toastr.css"
]

Upvotes: 0

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

As per the SASS Docs, ~ will point to src/ folder, when we import any SCSS files. We need to tell angular to include node_modules/ path, when we import any sass file. This can be achieved using stylePreprocessorOptions property inside angular.json.

"styles": [
  ...
],
"stylePreprocessorOptions": {
  "includePaths": [
    "../node_modules/ngx-toastr"
  ]
}

Upvotes: 2

Related Questions