node-sass-tilde-importer
node-sass-tilde-importer copied to clipboard
1.0.1 breaks importing breakpoint-sass
The latest version breaks importing breakpoint-sass because this lib has a "breakpoint" directory right next to the "_breakpoint.scss" file. This leads to
Error: File to import not found or unreadable: /..../node_modules/breakpoint-sass/stylesheets/breakpoint/index.
I'm fixing the 1.0.0 for now, don't know if it should be fixed by your side (I suppose you should test for the existence of a regular file before checking for the directory) or if the breakpoint-sass layout is considered bad practice... Either way this ..1 release is not backward compatible for everyone.
Hi @dpalita! Thanks for reporting it, good point the current version will try importing the directory first if that exists and then the file. I checked node-sass behaviour and it does support this scenario, we have to keep it sync, so the fix is needed. In the meantime, you can still use the latest version and import the breakpoint package using ~breakpoint-sass/stylesheets/_breakpoint, that will import the file.
Also encountered this issue, switching back to 1.0.0 in the meantime :)
Whatt do you mean by "will try importing the directory"? Is your module importing every SASS present in a directory when it finds one?
not every file, but only the "index" one in the particular directory which is being imported. e.g "index.{scss|sass|...}", the extension doesn't matter here. However when we have a file and the directory with the same name (or "compatible name", sass ignores underscore prefix) in the same folder then it favors the directory.
Same here with an import of Bootstrap because of the mixins folder :/
Thanks for the tip with the underscore.
Any idea if a fix will be released ?
Run into the same issue with mixins. And I can't just put a .scss extention to it, cause angular won't allow it. Although it compiles with node-sass, if I do.
@tadam313 why would you do that? Importing a directory doesn't make sense.
You can change import to:
@import '~breakpoint-sass/stylesheets/breakpoint.scss';
This is really strange, the behaviour of a tilde import is different for webpack's style-loader and node-sass-tilde-importer which seems to be used by Angular as well.
I would expect to just import
@import '~breakpoint-sass', especially having main key specified in the node module.
Having this issue with other packages as well. Also, have to structure own packages with index.scss on directories in order to make things work.
plus, "index.scss" isn't really conventional as far as I know.
I downgraded to 1.0.0 and can't properly resolve a scoped library either, getting different errors.
This is violating semantic versioning: patch version contains breaking changes.
Could anyone of maintainers please let us know if this is going to be fixed?
Why would we need an index.scss if neither Node or Ruby Sass work this way?
Yes, I'd like to know too why a patch version creates a breaking change and how this was not detected by the test suite. There may be something to improve there.
If this doesn't work and tries to read directory instead of file: @import "~bootstrap/scss/mixins";
Error: File to import not found or unreadable: /Users/John/Sites/website/node_modules/bootstrap/scss/mixins/index. on line 12 of templates/default/css/content.scss
@import '~bootstrap/scss/mixins';
How do you import the bootstrap mixins? Even with full filename same error as above. @import "~bootstrap/scss/_mixins.scss";