Electron: How to import or include CSS installed using npm package manager in our index.html?

Question

During development there is node_modules folder in the root directory of our Electron project which contains all packages we have installed. So, during development we can write something like this to import our CSS file to our webpage:

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">

How can we include CSS for a project which is intended to be packaged and distributed without node_modules?

Edit: After some research I found out that node_modules are not meant to be used this way (see this). Still, if something changes in future please feel free to add your answer.

Link to the repository I started with: https://github.com/electron/electron-quick-start

Majed Badawi · Accepted Answer · 2020-04-11 22:41:15Z

5

After doing some research, and since you are using the original boilerplate, I installed it and did the same as you said. Since your main issue is importing the style sheets in production when packaged, you can use electron-packager to build your app which will result in the latter being independent of the node module you installed during development. You can do these steps for testing:

npm i
npm i bootstrap --save
added <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> in the head
added <button type="button" class="btn btn-danger">Button</button> in the body for the sake of testing
npm install electron-packager --save
Add "build": "electron-packager . --asar" to your scripts in package.json
npm run build

Then you can see that Bootstrap is being used normally.

edited Apr 11, 2020 at 22:41

answered Apr 11, 2020 at 21:23

Majed Badawi

28.5k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Emir Over a year ago

I did everything as you wrote but when I start the packaged app the css styles don't seem to be applied to the app. Do you maybe miss something? Some import or require?

Majed Badawi Over a year ago

@Emir I updated the answer with the whole procedure

Collectives™ on Stack Overflow

Electron: How to import or include CSS installed using npm package manager in our index.html?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related