search

TrySound / postcss-easy-import

PostCSS plugin to inline @import rules content with extra features
MIT License
201 stars 25 forks source link

Node module import issues with Webpack 4 + SCSS #27

Closed onetrev closed 6 years ago

onetrev commented 6 years ago

I'm finding node_module import a bit hit and miss with my main SCSS import in Webpack + MiniCssExtract. Some seem to work, some don't. For example...

@import "animate.css"; -> this import works perfectly and loads the animate.css module. Note the .css is there because that's the name of the actual node module.

However, @import "lity"; does not work and I receive this error below. Looks like the problem is it trying to use the .js file instead of the css?

Invalid CSS after "...Licensed MIT */": expected selector, was "(function(window, f"
          in C:\websites\wpdev\wp-content\themes\gutendev\node_modules\lity\dist\lity.js (line 4, column 1)

So for that module I have to put in the full path like so to import the file: @import "/node_modules/lity/dist/lity.css";

simonsmith commented 6 years ago

I believe this is because lity has the main property in the package.json pointing to the dist/lity.js file:

https://github.com/jsor/lity/blob/master/package.json#L11

In the case of the animate.css and other css packages (like normalize.css) themain property is pointed at the actual CSS file.

You will need to use the full path in this case, as you've identified.

onetrev commented 6 years ago

Gotcha. All good then. Explains why it works sometimes and not others. Thanks a ton for the follow up. PS, I really like SUIT CSS.