search

systemjs / plugin-css

CSS loader plugin
MIT License
92 stars 60 forks source link

Css files bundled as @import #126

Closed j-perezr closed 7 years ago

j-perezr commented 7 years ago

I have imports for some css files, when I try to create a bundle, the css of libs are bundled correctly (jquery ui, font-awesome,flexboxgrid) but my css files are bundled with @import Also, these css files doesn't load properly image image image

image

I use typescript 2.1.5 with module system, the plugin css 0.1.34 and clean-css.

I tried to put bundleCss:true in config but the same happens. ¿I have to configure something else?

sberney commented 7 years ago

The issue with the files not loading correctly is the backslashes in the import statement.

I see that this commit fixes it, unfortunately that is not included in the tagged release 0.1.32 (the latest).

I have three consecutive import statements, and two of them are resolved to media query imports, and one has its css embedded. The one that is embedded properly was installed using jspm -- it's a package -- 'ladda/dist/ladda-themeless.css'. The other two are my own css files, 'css/xyz.css'. I hoped maybe the difference would be the directory name css, but renaming it to dss did not solve the problem.

For me, this is occurring after an upgrade in jspm, systemjs, and plugin-css. Not sure if media queries were used before, but I don't remember them being there.

sberney commented 7 years ago

On further investigation, I've found the last version that worked: 0.1.29. I'm reverting to that for the time being.

j-perezr commented 7 years ago

Thanks for the answer, I installed the version 0.1.29 and works fine. I'll be waiting for the next update :)

t3hmrman commented 6 years ago

For anyone else that might run into this problem -- it seems to happen when you have a bug in your CSS.

I started running into this, and was seeing a stray @import at the top -- the file that was being imported had a CSS bug inside it (a line like background-color: background-color: #....; was hanging around).

Instead of reverting versions, binary comment/delete inside the file that's being imported and make sure you don't have a bug in there. The key to realizing this for me was the discrepancy between non-bundled and bundled versions of the site (same code but bundling semeed to break it), checking Style Editor in the dev console (and seeing the @import statement), and the knowledge that it was JUST working (so something small must have gone wrong/a bug might have slipped in)