How do I import a CSS file from node_modules?

[developomp]

How do I import a CSS file from node_modules?
I've been trying to solve this problem for one whole day trying every combination under the sun and none of them worked for me.

The only thing that was even remotely close to a solution was adding a stylesheet link to cdn in index.ejs but I'd like a solution that works offline too.

index.ejs:

<link
    async
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/semantic-ui@2/dist/semantic.min.css"
/>

Things I've tried (and every combination):

• adding ~ in front of the import path
• using relative path (../..)
• adding this to webpack.config.base.ts:

  {
      test: /\.css$/,
      loader: "style-loader!css-loader"
  }
  

• importing in the TSX file directly with import 'package/path/to/css.css';
• adding @import 'package/path/to/css.css'; to a CSS file and importing it

Related issues:

• import css file from node_modules? #352
• How to properly include bootstrap's css in electron app?  #806
• Cannot import CSS? #1087
• Unable to import CSS file from node_modules when target is electron parcel-bundler/parcel#1868

How to reproduce the issue:

• clone the erb repo
• install the semantic-ui-css package
• try to import semantic-ui-css/semantic.min.css

[developomp]

This is driving me crazy

[kbrisso]

Check this thread out below. I have not tried this yet but will be doing so soon.

https://stackoverflow.com/questions/49518277/import-css-from-node-modules-in-webpack

Here is some other info on the help site.

https://electron-react-boilerplate.js.org/docs/styling

It did not work with ~

but this worked for me in App.tsx file.

import '../../node_modules/bootstrap/dist/css/bootstrap.css';

[amilajack]

Here's an example of integrating tailwind, which requires importing tailwind from node_modules
amilajack/erb-tailwind-example@5962bb6

[developomp]

Here's an example of integrating tailwind, which requires importing tailwind from node_modules amilajack/erb-tailwind-example@5962bb6

This seemed promising but adding CSS loaders to module.rules in webpack config didn't work :(

No matter what I do as soon as I add the line import "semantic-ui-css/semantic.min.css" I get a Cannot GET /index.html error.

[UserJHansen]

In your app.css you should be able to use:

@import '~semantic-ui-css';

[developomp]

In your app.css you should be able to use:

@import '~semantic-ui-css';

That's not even a CSS stylesheet.

[UserJHansen]

Have you tried it? It works for Bootstrap

[developomp]

Yes, and it doesn't work.

[amilajack]

This is a working example of ERB + bootstrap https://github.com/kbrisso/erb-bootstrap-ipc

[UserJHansen]

This is a working example of ERB + bootstrap https://github.com/kbrisso/erb-bootstrap-ipc

Sorry but we are looking for a solution for semantic ui

[UserJHansen]

I just looked through the errors and it looks like it is a problem with importing fonts.

[kbrisso]

@developomp I tried to replicate your issue but I could not install Semantic because of a Gulp issue. What I did is download the current build https://github.com/Semantic-Org/Semantic-UI-CSS/archive/master.zip. I unpacked it in the node_modules folder and then added the dependency to my package file. I wasn't able to use the "~" import but I was able to add this to the App.tsx

It built fine but then when I ran it I encountered this error.

I found this post
Semantic-Org/Semantic-UI-React#4227

I removed the semicolon from min CSS and then I ran it again and it worked.

It seems to work this way, let me know if this helps.

[UserJHansen]

Shame we can't fix the issue here

[developomp]

Thank you so much @kbrisso for taking a deep look into it.
Removing one semicolon from the double does fix the issue.
I was about to open an issue in their repo but the last commit is from 2018 :(

I ended up writing a script for postinstall that replaces double semicolons from semantic-ui-css/semantic.css and semantic-ui-css/semantic.min.css.