Importing CSS from node_module via LESS file?

help
1

I’ve been using a main.less file to import all my styles into the application and until now it’s been working flawlessly. However, I now have an NPM package with no .less file to import, only a .css file. So I thought that the below would work fine, but it seems to just complain mightily. What am I doing wrong?

For reproduction, I’m trying to import the CSS in https://github.com/bvaughn/react-virtualized-select

// Bootstrap Custom Imports
@import "{}/imports/ui/stylesheets/bootstrap.less";

// NPM Packages
@import "{}/node_modules/toastr/toastr.less";
@import "{}/node_modules/react-select/less/select.less";
@import (css) "{}/node_modules/react-virtualized-select/styles.css"; // THIS LINE DOESN'T WORK

// Colors
@import "{}/imports/ui/stylesheets/planglow_colors.less";

// Custom Style Overrides
@import "{}/imports/ui/stylesheets/styles.less";
@import "{}/imports/ui/stylesheets/spacers.less";

// Components
@import "{}/imports/ui/components/Footer.less";
@import "{}/imports/ui/components/Loading.less";
@import "{}/imports/ui/components/DashboardButtons.less";

// Pages
@import "{}/imports/ui/pages/LoginPage.less";
@import "{}/imports/ui/pages/DesignCentre.less";
2

There are some issues open regarding this topic (eg https://github.com/meteor/meteor/issues/6846 ). The summary is that you can’t import node_modules css from a css import for now. Never heard any official response about if this will be available (or if it should be). THe only thing you can do is import the css from javscript files (which is not very logical but…)

3

Our workaround is to copy the CSS files to our app’s /imports/client/styles/vendors/ directory and replace .css extension with .less extension. So flexbox.css becomes /imports/client/styles/vendors/flexblox.less.

Then import from /client/main.less using:

@import "/imports/client/styles/vendor/flexboxgrid";

Not a big issue to maintain for us as the styles we use in this way are related to components that are not changing frequently or are likely getting overridden with our custom styles anyway.

4

Well damn. That sucks.

Neither option is great in my opinion, but I guess they’ll have to do for the time being! Thanks for the help @tcastelli & @skirunman. :thumbsup: