CSS loader for 1.3? Or something else?

help
1

I use 1.3 and React, many React packages on NPM have their own CSS files. Usually they will be somewhere in the node_modules directory (for example package/dist/css/). It’s not the biggest problem, you can just copy them to a directory outside node_modules and Meteor will be able to detect them.

But, recently I stumbled across a package (https://github.com/roadmanfong/react-cropper) that had this in it’s source:

 require('cropperjs/dist/cropper.css')

It will straight forward crash Meteor. I have asked the author of the package and I’ve got this response:

But if you use webpack or browserify to build your app. There are css loader plugins to handle this special kind of require. (…) I never use Meteor before. I think maybe there’s some css require plugin in Meteor too.

How should I tackle this?

Thanks

2

There currently is a known limitation which will be addressed in a later release of Meteor. You can track it at https://github.com/meteor/meteor/issues/6037

and in the meantime, suggested solution is symlinking to that file from somewhere else in your app that is outside the node_modules directory so that Meteor can pick it up.

3

As @serkandurusoy mentions symlinking works fine and is what we are using right now. Also, this PostCSS package looks to be a nice solution available right now.

1 Like
4

Right, but this won’t fix the crashing. This line:

require('cropperjs/dist/cropper.css')

Is still there. We need css loader plugin. I have no idea how many more packages loads css files like that, at least a bunch.

Or maybe its just a bad practice from the author to assume everyone use Webpack/Browserfiy?

5

In Meteor 1.3 you can require css files in JS, they will be attached to the <head> for now, but I gues this will not work in this case :wink: and I wonder if this will work when you want to require from node_modules at all. We need to wait for Meteor 1.3.1 (I hope).