I want to override several scss files of bootstrap. The paths in my project are like this
Source code of my scss:
/src/client/sass/style.scss
Source code of bootstrap:
/bower_components/bootstrap-scss
Now if i edit the style.scss in Webstorm it cant find the import
@import "bootstrap"
Im using gulp so i created a gulp task, that generates css from default bootstrap and my additions so i dont use the WebStorm watches.
How can i configure the project, so that the @import are correctly linked to bower components? Currently im using a symlink, but it feels like a hack.
You can use @use rule for it. This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!
Sass, SCSS, and Less WebStorm integrates with compilers that translate Sass, Less, and SCSS code into CSS.
Just mark /bower_components/
as Resource Root (Mark directory as/Resource root
) - WebStorm will resolve imports relative to it
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With