Include CSS from node_modules

[mrtysn]

I am trying to include a CSS file from node_modules, specifically at:

semantic-ui-css/semantic.min.css

How would you properly import this? Currently, I am adding

@import "~semantic-ui-css/semantic.min.css";

to the top of styles.scss. It starts normally, but gives the error below when the page is loaded.

Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.12, but postcss-partial-import uses 5.2.17. Perhaps this is the source of the error below.
ERROR in ./node_modules/css-loader?{"modules":true,"localIdentName":"[local]","sourceMap":true,"minimize":false,"importLoaders":2}!./node_modules/postcss-loader/lib?{"sourceMap":true}!./node_modules/sass-loader/lib/loader.js?{"outputStyle":"expanded","sourceMap":true,"sourceMapContents":true}!./src/resources/css/style.scss
Module build failed: Error: Failed to find '~semantic-ui-css/semantic.min.css'
in [
/home/coldwhistle/dev/react-pwa/src/resources/css
]
at /home/coldwhistle/dev/react-pwa/node_modules/postcss-import/lib/resolve-id.js:48:11
at
@ ./src/resources/css/style.scss 4:14-209 18:2-22:4 19:20-215

[tirthbodawala]

@mrtysn I would copy the css file to libs in "src/resources/css/libs/semantic.min.css" all files in resources are imported via loaders and without modification of name i.e. localIdentName=[local] thus not changing its implementation. Then you can directly use the css classes in the application.

However I would recommend not to do that and use the css in component isolated whenever possible. This reduces the size of common style and loads the css in required module only.

[mrtysn]

Thank you for the answer. I am using Semantic as a global framework, therefore I need it in almost every component. As explained here, the CSS is distributed via their CDN or an npm package. So, copy-pasting would mean regularly checking if they released a new version or not. Since that is not an optimal way of doing it, I would very much prefer if I could directly import it the same way I did it in create-react-app previously, that is:
import 'semantic-ui-css/semantic.min.css';
in index.js.

The problem is, this CSS file also contains ttf,woff,woff2 thus css-loader fails to load it. Any solutions for such use cases? I believe many people are using a global UI framework and including its CSS so this is a common problem for this react-pwa project.

[tirthbodawala]

@mrtysn Yes I can think we can specify that using anything from node_modules should be treated same as we do with src/resources/libs, That should solve the problem. Let me create a commit for you tomorrow (pretty late here past midnight). If that works for you, I shall add it to master branch and next release.
Does that work ?

[mrtysn]

Of course, that would be great! We really like the project so far, thank you for the work.

If we can smoothly migrate our existing project and solve the further problems that have not occurred yet, we are considering to drop create-react-app in favor of react-pwa. We would also be happy to back the project if you'd help us solve such performance issues.

I am keeping this issue open for now, until it is resolved.

[ghost]

I know Stack Overflow has become quite the troll farm these days. Perhaps there's room for a free Discord server as this repo gains mindshare and popularity, to help keep the repo clean of help requests.

[tirthbodawala]

@mrtysn I have pushed the changes to master and tested it with Semantic-UI-CSS with simple
import 'semantic-ui-css/semantic.min.css';

if you want it globally then use the import in src/client.js, that will include the semantic css in common bundle. thus you can use it whole application.

[tirthbodawala]

@mrtysn Ok. The build is yarn test - ed. Let me know if this solves the problem of css include from node_modules.

@jhabdas I updated this cause many would like to use 3rd party plugins and css via node_modules and totally made sense.

[mrtysn]

@tirthbodawala Hi Tirth, importing css still gives error:

ERROR in ../node_modules/semantic-ui-css/semantic.min.css
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve 'themes/default/assets/fonts/icons.eot' in '/home/coldwhistle/dev/react-pwa/node_modules/semantic-ui-css'

Can you provide a working example?

[tirthbodawala]

@mrtysn how are you importing it? in css? or in client.js?

[mrtysn]

@tirthbodawala, I am working with the latest commit in the master branch.

. I've installed semantic-ui-css & semantic-ui-react as devDependencies.
. Added import "semantic-ui-css/semantic.min.css"; to src/client.js

Both yarn start and yarn build fails

[tirthbodawala]

For anyone who are still facing the issue, please do not include minified version of css from node_modules,
In this case do not include "semantic.min.css" but use "semantic.css"
There are path resolution issues with menified css.

[EvanBurbidge]

@tirthbodawala has this issue been resolved? currently hitting it right now, was there ever a workaround created?

[tirthbodawala]

@EvanBurbidge We are launching react-pwa v2 that would solve the issue. please stay with us a bit longer. It is a very big change.