Can't import css files from node_modules

[pilarArr]

I'm trying to import leaflet.css into my app.scss like this:

@import '../../../node_modules/leaflet/dist/leaflet.css';
@import '{}/node_modules/leaflet/dist/leaflet.css';
@import '/node_modules/leaflet/dist/leaflet.css';
@import 'leaflet/dist/leaflet.css';

I always get variations of this error

While building for web.browser:
   /imports/ui/stylesheets/app.scss: Scss compiler error: File to import:
   ../../../node_modules/leaflet/dist/leaflet.css not found in file:
   (myProjectPath)/meteor/{}/imports/ui/stylesheets/app.scss

I've seen this error in many issues and I've yet to find an answer. Right now I'm using fourseven:[email protected] and [email protected]. I also have this problem when importing any other css file from node_modules. Importing .scss files from node_modules does work.

This is some of the research I've done:

The thing is that issue #219 is closed, in there they say that issue is a duplicate of #195, then issue #195 is also closed, and they point to issue #165 to continue the discussion there, on issue #165 they point to meteor/meteor#6037 which is also closed.

But issue #165 is off topic in the sense that it refers specifically to Meteor 1.3.
I'm using 1.5 and still have this issue.

UPDATE: This issue is now being dicussed here meteor/meteor#6846

[mitar]

Yes, it seems loading CSS files really does not work. Loading SCSS files does, but not CSS. It seems it is all because of the wrong filename. So if I do @import '{}/node_modules/leaflet/dist/leaflet it searches for node_modules/leaflet/dist/leaflet.sass file (or node_modules/leaflet/dist/leaflet.scss) file. But not node_modules/leaflet/dist/leaflet.css.

[mitar]

I think the issue is that this code searches only over files which are known to Meteor (part of Meteor packages or app) and not over the file system.

[mitar]

See #258.

[djorborn]

If you are using webpack you can add this to your sass-loader

{
            loader: 'sass-loader',
            options: {
              "includePaths": [
                require('path').resolve(__dirname, 'node_modules')
              ]
            }
          }

else you can make a .sassrc.js

const path = require('path')

const CWD = process.cwd()

module.exports = {
  "includePaths": [
    path.resolve(CWD, 'node_modules'),
    path.resolve(CWD, 'src')
  ]
}

then you can do something like @import 'leaflet/dist/leaflet.css'

[livimonte]

I made a PR with CSS imports working with POSTCSS in this Meteor React boilerplate from @juliancwirko. If you're having trouble making it work, take a look. It has the SCSS preprocessor working along with the POSTCSS as well.
https://github.com/juliancwirko/scotty

[pilarArr]

@livimonte I tried the boilerplate you posted.
From what I understand with this I can import the css file from node_modules on a main.css file saved on the client folder.
I've tried it and it works partially, what doesn't get resolved are the paths to the assets/images/icons inside node_modules. If I copy all the assets into the public folder it works.

Using leaflet as an example I can load the leaflet css but the icons won't load. I'll try to get a MWE to show you this.

[livimonte]

Hi @pilarArr, I think this is planned to be solved in the future as feature request see: meteor/meteor#6846

[pilarArr]

This issue is now moved to meteor/meteor-feature-requests#278
There is a workaround that involves using postcss in a comment on that issue

[sebastian-ruiz]

This has now been fixed in version 4.14.1

Refer to these lines in the code for details:

meteor-scss/plugin/compile-scss.js

Lines 182 to 185 in 1359363

	if (importPath.endsWith('.css')) {
	// .css files aren't in allFiles. Replace {}/ for absolute path.
	importPath = importPath.replace(/^(\{\}\/)/, rootDir)
	}