package imports not working

[Evanion]

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:

@import "@blueprintjs/core/src/blueprint";

in imported scss files:

@import "~bourbon/app/assets/stylesheets/bourbon";

error:

{
  "status": 1,
  "file": "~/Projects/myApp/node_modules/@blueprintjs/core/src/common/_font-imports.scss",
  "line": 4,
  "column": 1,
  "message": "File to import not found or unreadable: ~bourbon/app/assets/stylesheets/bourbon.\nParent style sheet: ~/Projects/myApp/node_modules/@blueprintjs/core/src/common/_font-imports.scss",
  "formatted": "Error: File to import not found or unreadable: ~bourbon/app/assets/stylesheets/bourbon.\n       Parent style sheet: ~/Projects/myApp/node_modules/@blueprintjs/core/src/common/_font-imports.scss\n        on line 4 of node_modules/@blueprintjs/core/src/common/_font-imports.scss\n>> @import \"~bourbon/app/assets/stylesheets/bourbon\";\n   ^\n"
}

My package.json

"dependencies": {
...
    "@blueprintjs/core": "^1.35.5",
    "bourbon": "^4.3.4",
...
},
"devDependencies": {
...
    "node-sass-chokidar": "^0.0.3",
...
},
"scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-scripts build",
    "build": "npm-run-all build-css build-js",
...
}

For some reason it won't understand the ~ pointer?

[michaelwayman]

try removing the underscore from the name and let me know if it is still happening.

[nacmartin]

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 )

[michaelwayman]

@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?

[nacmartin]

@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

[Evanion]

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

[Evanion]

This seems to be a feature from webpack

...you have to use the Webpack alias resolution ~ character to point to node_modules.

[ghost]

I also fixed with node-sass-tilde-importer. Maybe can you include that plugin in this amazing node-sass-chokidar, @michaelwayman?

[fbarbare]

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 @

[mdebeus]

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.

[nicholaai]

the tip submitted by @nacmartin should be added to the readme. saved me after working on this issue for hours.

thanks man!

[ChrisChiasson]

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.