CODEWITHSUNDEEP
sassfile-watcherrider
InversionDK
InversionDK

Reputation: 205

Jetbrains Rider SCSS load-path

I've started using JetBrains Rider as my primary IDE - and I love it so far. While using Visual Studio, I used Web Compiler to compile SCSS files to CSS. Worked great. However - I'm strugling with getting Rider to compile SCSS files correct.

I've setup the File Watcher like the documentation says: https://www.jetbrains.com/help/rider/Transpiling_SASS_LESS_and_SCSS_to_CSS.html#ws_sass_less_scss_example_less.

This works fine with simple SCSS files. But - when I try to use load-path, things stop working.

I'm trying to include Foundation CSS which I've installed via NPM - so it's located in node_modules/foundation-sites/scss. The following works like a charm when using the command line directly:

sass --load-path=node_modules/foundation-sites/scss wwwroot/styles/main.scss:wwwroot/styles/main.css

My main.scss file:

@import 'foundation';  
@include foundation-everything;

I get a perfect CSS file with Foundation included etc.

However - when I try the same in Rider, I simply get an error:

sass.cmd --load-path=node_modules/foundation-sites/scss main.scss:main.css
Error: Can't find stylesheet to import.
  ╷
1 │ @import 'foundation';
  │          ^^^^^^^^^^^^
  ╵
  main.scss 1:10  root stylesheet

I've included the --load-path argument in my File Watcher:

enter image description here

But I simply can't get it working. I would LOVE to use Rider for all my web development - so any help getting the SCSS setup working with File Watcher would be very much appreciated.

I hope someone can help me out. I've searched the official JetBrains forums etc. - but can't find any solution to this issue. I hope the solution can help others out as well.

Thanks a lot!

Upvotes: 1

Views: 1150

Answers (1)

InversionDK
InversionDK

Reputation: 205

After the input from @lena, I got my solution to work via one of two options.

Option 1 - Use relative path to node_modules from the actual SCSS file being watched: enter image description here

Option 2 - Set WorkingPath to the root of the project and then using relative path to the input SCSS and output CSS files: enter image description here

As was pointed out, load-path uses relative paths. After fixing that, my SCSS is now transpiled to CSS perfectly.

Thanks a lot for the input @lena :)

Upvotes: 0

Related Questions