Open Evanion opened 6 years ago
try removing the underscore from the name and let me know if it is still happening.
I got it working by adding the option --importer=node_modules/node-sass-tilde-importer
(after installing the package https://www.npmjs.com/package/node-sass-tilde-importer )
@nacmartin That's great that you were able to fix the issue 👍
I had no clue about the ~ convention until this.
Does node-sass
has the same issue? I'm assuming you would be getting the same error.
If this is a convention that the community is going to start following though maybe we can fix this in in node-sass-chokidar?
@michaelwayman this comes I think from Webpack sass-loader https://github.com/webpack-contrib/sass-loader#imports (or maybe it is implemented in Webpack itself and not only in the loader, I don't know). I guess that many users will have sass files written with that import style for this reason.
Just to give an example of an extremely popular library, the docs for Bootstrap mention it as the way to use Bootstrap styles in webpack: https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-precompiled-sass
As in my example above the blueprint.js framework also uses this convention for importing peer dependencies.
@import "@blueprintjs/core/src/blueprint";
that points to a package in my node_modules
folder
This seems to be a feature from webpack
...you have to use the Webpack alias resolution ~ character to point to node_modules.
I also fixed with node-sass-tilde-importer
. Maybe can you include that plugin in this amazing node-sass-chokidar
, @michaelwayman?
I'm having a similar problem when using node-sass-chokidar
with @material/button
, and I think the import fails because the package starts with an @
Adding my two cents...
I too am importing @blueprintjs/core sass and ran into the same problem -- thank you @nacmartin for figuring out the fix.
the tip submitted by @nacmartin should be added to the readme. saved me after working on this issue for hours.
thanks man!
In my case, all I was missing was the some context. I wanted to @import
a CSS (not SCSS) file from a package in node_modules
. No matter what I did, even using the tilde importer above, I would always get a URL statement in the final output styles.css
file. Eventually, I read https://github.com/sass/sass/issues/556 and then tried to import the CSS file from the package without using its file extension. This causes the importer transclude the contents properly at compile time. Note that no tilde is needed in the @import
if you're using something like create-react-app. The reason why is that the command line arguments to node-sass-chokidar
have this parameter: --include-path ./node_modules
... This is what you would need to add if you want to import from a package.
When I try to import sass from a node_module package it works just fine... But if that package in turn imports another package, it fails:
index.scss:
in imported scss files:
error:
My
package.json
For some reason it won't understand the
~
pointer?