Open pilarArr opened 6 years ago
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
.
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.
See #258.
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'
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
@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.
Hi @pilarArr, I think this is planned to be solved in the future as feature request see: https://github.com/meteor/meteor/issues/6846
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
This has now been fixed in version 4.14.1
Refer to these lines in the code for details: https://github.com/Meteor-Community-Packages/meteor-scss/blob/135936373edaa09259ccf3b632604750298367cd/plugin/compile-scss.js#L182-L185
I'm trying to import
leaflet.css
into myapp.scss
like this:I always get variations of this error
I've seen this error in many issues and I've yet to find an answer. Right now I'm using
fourseven:scss@4.5.4
andMeteor@1.5.1
. I also have this problem when importing any other css file from node_modules. Importing.scss
files fromnode_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