Sass: File to import not found or unreadable: ~theme/common

[olalonde]

I am using Sass with Webpack which allows me to prefix imports with ~ which tells webpack to load the file from node_modules or other directories defined in webpack.config.js. I was wondering if there were any way to tell sass to look up in those directories as well so I can get rid of the "File to import not found or unreadable" errors I am getting in Vim/Syntastic.

Example:

@import "~theme/common";

Generates the following error:

ui/PageHeader/styles.scss|1 error| File to import not found or unreadable: ~theme/common.

Related: vim-syntastic/syntastic#1799

[chriseppstein]

are you using ruby sass or node-sass? The answer for how to do this varies by implementation.

[olalonde]

ruby sass I believe.

Syntastic version: 3.7.0-129 (Vim 704, Darwin)
Info for filetype: scss
Global mode: active
Filetype scss is active
The current file will be checked automatically
Available checker: sass
Currently enabled checker: sass
The current file will not be checked (file not readable / not local)

~$ which sass
/Users/olalonde/.rbenv/shims/sass
~$ sass --version
Sass 3.4.21 (Selective Steve)

[chriseppstein]

@olalonde is webpack looking for css files or other Sass files?

There's this one: https://github.com/jtangelder/sass-loader but it's meant to be used with node-sass.

This one claims to work with ruby sass: https://www.npmjs.com/package/ruby-sass-loader, but a quick scan of the implementation tells me it probably doesn't work too well. The right way would use a ruby library to create an Importer not unlike this one I made