Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How configure webstorm to use import scss from different path in a project

Tags:

sass

webstorm

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.

like image 701
Sonne Avatar asked Nov 16 '15 13:11

Sonne


People also ask

How do I run a SCSS from another SCSS file?

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!

Does WebStorm support SCSS?

Sass, SCSS, and Less WebStorm integrates with compilers that translate Sass, Less, and SCSS code into CSS.


1 Answers

Just mark /bower_components/as Resource Root (Mark directory as/Resource root) - WebStorm will resolve imports relative to it

like image 110
lena Avatar answered Nov 01 '22 19:11

lena