How to address node-sass regression(?) "It's not clear which file to import for @import"

Question

It seems that a recent version of node-sass (3.4.1) breaks our build. I am consistently getting this error message:

It's not clear which file to import for '@import "../file"'.
Candidates:
     ../file.scss
     ../file.css
Please delete or rename all but one of these files.

Now, this is occuring for all the files in the project that have not explicitly specified "file.scss" in their name.

I have not been able to determine a fix for this bug - Nor can I find any documentation to address what has changed in node-sass to cause it. We have too many files for it to be practical to go rename each import.

Can someone point me in the right direction?

Edit:

This is also happening with files which have an underscore (eg. _file) in their path. Doesn't seem to recognize that these files are partials.

Answer 1

I had the same problem, but only with node-sass version 3.4.2. Version 3.4.1 was working ok for me.

It seems this is a known issue in node-sass - https://github.com/sass/node-sass/issues/1222 however its not clear exactly which versions are affected.

I fixed it by uninstalling grunt-sass, then installing the exact version of node-sass that worked correctly (v3.4.1), and then finally reinstalling grunt-sass.

$ npm uninstall grunt-sass
$ npm install [email protected] --save-dev
$ npm install grunt-sass

This means grunt-sass uses your installed version, rather than installing its own version which it defines as "node-sass": "^3.4.0"

Weirdly even though I specified an exact version in the install command I still ended up with this in my package.json:

"node-sass": "^3.4.1"

So I manually changed that to the exact version so other developers in the team would get the correct version:

"node-sass": "3.4.1"

Of course if you find that the only version that works for you is v3.3.0 then use that that version in the instructions above.

Answer 2

Option 1

You can import using the file extension

@import "../file.scss"

Option 2

Or you can tell SASS not to generate the .css file by import without output. You have to rename the file from file.scss to _file.scss

That will let you import like this

@import "../file"

I prefer option 2 as it reduces the number of css files you have to keep track of.