[1.3.2] "File to import not found" when importing CSS from NPM

1

I’ve been trying out 1.3.2’s new CSS import feature (following the guidelines here) but it just isn’t working for me.

I keep getting “file not found” errors, even though I’m sure the file exists:

While processing files with fourseven:scss (for target web.browser):
   /packages/nova_base-styles/lib/stylesheets/main.scss: Scss compiler error: File to import: {}/node_modules/bootstrap/scss/bootstrap.scss not found in file:
   /Users/sacha/Dev/Telescope/{nova:base-styles}/lib/stylesheets/main.scss

I should mention I’m trying to import from another package, not from the app. Does that make any difference?

1 Like
2

I have been able to import SCSS inside another SCSS with this syntax,

$icon-font-path: "/fonts/";
@import "{}/node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";

$fa-font-path:"/fonts";
@import "{}/node_modules/font-awesome/scss/font-awesome.scss";

@import "{}/node_modules/animatewithsass/animate.scss";

Make sure you have installed fourseven:scss in any package/app you want to use it and that you have replaced standard-minifier-css with seba:minifiers-autoprefixer (as per scsss instructions).

Unfortunately, I can’t import CSS from other packages after doing this, only SCSS will work.

3

I’m having the same issue. I’d like to import a .css file from an npm package (as required by the library) – currently there seems to be no way to do this. Any suggestion?

4

You can import CSS from a npm package inside your javascript code
write import "npmpackage-name/route/to/css/xxx.css" and the css will be placed between your <head></head> AFTER merged-stylesheets.css (this order may/may not work for you) but at least this is possible