how to add css files #80

roscoevanderboom · 2019-09-09T01:35:30Z

First off, thanks for this excellent boilerplate! I've tried a few and I really like that the project is structured like an Electron project and not like a create-react-app project.
In my project, I've also added MaterialUI and everything is looking great. Now I want to add some custom style sheets. Adding css seems like a no-brainer...but I can't seem to get it to work.

I've tried import './styles.css as with React. Can't find module, no matter where I put the file.

I've tried adding link tags in the index.html file. GET request failed. Cannot find resource, unless file is in app/renderer and build/renderer directories. Once I restart application, the css file is removed from the build folder, even though it is still in app folder.

I'm sure it's got to do with the relative path Electron uses to render assets, but I can't seem to figure it.

pronebird · 2019-09-09T10:39:10Z

Hi,

Thanks for kind words. 👍

Adding CSS is easy. I think what happens is that you don't have a task to copy CSS in build folder. The boilerplate itself does not offer any CSS or SASS handling. We like to keep it lean, besides handling visual appearance in javascript is really not bad.

We do use a bit of CSS in Mullvad VPN app and so we do have a task for that, feel free to copy the relevant bits:

You will have to plug in the CSS-related tasks in the existing flow. Then update thebuild task in your gulpfile, add the copyCss task. Right now it only copies HTML as you see.

Cheers,
Andrej

roscoevanderboom · 2019-09-09T11:49:11Z

Thanks for the quick reply. I'm not familiar with Gulp or hotloading for Electron, so I'm sure in missing something. The CSS file is still not being copied Here is what I've done so far:

tasks/assets.js
https://github.com/roscoevanderboom/MultiChain-Client/blob/Multichain-Manager/tasks/assets.js

tasks/watch.js
https://github.com/roscoevanderboom/MultiChain-Client/blob/Multichain-Manager/tasks/watch.js

gulpfile
https://github.com/roscoevanderboom/MultiChain-Client/blob/Multichain-Manager/gulpfile.js

pronebird · 2019-09-09T11:57:23Z

@roscoevanderboom just correct the path in copyCss from src/renderer/... to app/renderer/... and you should be good to go

roscoevanderboom · 2019-09-09T11:57:37Z

I fixed it by including the the style at the top of index.html. I was only trying to add -webkit-app-region: drag; to make the frameless window draggable

roscoevanderboom · 2019-09-09T12:12:03Z

@pronebird haha...thanks. That's a lame mistake. I've update paths in assets.js and watch.js, but it still doesn't work. I'll figure it out at some point. For now the work-around is good enough.

ps. I've used Mullvad before. Great VPN :)

pronebird · 2019-09-09T13:24:30Z

@roscoevanderboom add assets.copyCss task in here as well https://github.com/roscoevanderboom/MultiChain-Client/blob/Multichain-Manager/tasks/watch.js#L32

Then it should work.

pronebird · 2019-09-10T09:33:35Z

Here is the complete patch to add CSS into the boilerplate if someone else is looking to do that, just save the contents below to file, then run git apply name-of-file.patch in terminal.

diff --git a/app/renderer/index.html b/app/renderer/index.html
index 5ac3b8e..0f3fc06 100644
--- a/app/renderer/index.html
+++ b/app/renderer/index.html
@@ -3,6 +3,7 @@
   <head>
     <title>My App</title>
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
+    <link rel="stylesheet" href="./style.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/app/renderer/style.css b/app/renderer/style.css
new file mode 100644
index 0000000..a6c117b
--- /dev/null
+++ b/app/renderer/style.css
@@ -0,0 +1,3 @@
+body {
+  background: #fa0;
+}
diff --git a/gulpfile.js b/gulpfile.js
index ce6be41..f8be414 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -9,7 +9,7 @@ const dist = require('./tasks/distribution');
 task('clean', function(done) {
   rimraf('./build', done);
 });
-task('build', series('clean', assets.copyHtml, scripts.build));
+task('build', series('clean', assets.copyHtml, assets.copyCss, scripts.build));
 task('develop', series('clean', watch.start));
 task('pack-win', series('build', dist.packWin));
 task('pack-linux', series('build', dist.packLinux));
diff --git a/tasks/assets.js b/tasks/assets.js
index 0d67bf2..736385d 100644
--- a/tasks/assets.js
+++ b/tasks/assets.js
@@ -4,6 +4,12 @@ function copyHtml() {
   return src('app/renderer/index.html').pipe(dest('build/renderer'));
 }
 
+function copyCss() {
+  return src('app/renderer/**/*.css').pipe(dest('build/renderer'));
+}
+
 copyHtml.displayName = 'copy-html';
+copyCss.displayName = 'copy-css';
 
 exports.copyHtml = copyHtml;
+exports.copyCss = copyCss;
diff --git a/tasks/watch.js b/tasks/watch.js
index 5e3667d..3d37d69 100644
--- a/tasks/watch.js
+++ b/tasks/watch.js
@@ -19,14 +19,20 @@ function watchHtml() {
   );
 }
 
+function watchCss() {
+  return watch(['app/renderer/**/*.css'], series(assets.copyCss, hotreload.reload));
+}
+
 watchMainScripts.displayName = 'watch-main-scripts';
 watchRendererScripts.displayName = 'watch-renderer-scripts';
 watchHtml.displayName = 'watch-html';
+watchCss.displayName = 'watch-css';
 
 exports.start = series(
   assets.copyHtml,
+  assets.copyCss,
   scripts.developBuild,
   hotreload.start,
   electron.start,
-  parallel(watchMainScripts, watchRendererScripts, watchHtml),
+  parallel(watchMainScripts, watchRendererScripts, watchHtml, watchCss),
 );

roscoevanderboom · 2019-09-12T08:08:50Z

@pronebird Thanks. I followed your previous notes and everything is working very well. I learned a lot and can now manage adjusting the code as I need it.

I have also set up Hotreload to watch more html files, as I have multiple browser windows in my app.

Thanks for all the support and clear instructions.

athenawisdoms · 2020-04-12T23:56:03Z

@pronebird @roscoevanderboom Where should the .css files be placed?

I have a file structure where a component such as one defined in /app/render/components/Dashboard.js is trying to import css styles from /app/render/components/Dashboard.css using

import styles from './Dashboard.css`

After applying the gulpfile patch, I am still unable to use the CSS definitions from Dashboard.css.

What is the correct way to import the CSS styles?

Thanks!

roscoevanderboom · 2020-04-13T02:04:38Z

@athenawisdoms You should be able to put the .css anywhere, as long as you set up the assets.js , watch.js and gulpfile.js to include .css files.

roscoevanderboom · 2020-04-13T02:15:04Z

In this example, I simply copy everything in the main and renderer processes as it changes. It's probably not the best strategy but work well for me.

Assets.js
https://github.com/roscoevanderboom/MultiChain-Client/blob/master/tasks/assets.js

Watch.js
https://github.com/roscoevanderboom/MultiChain-Client/blob/master/tasks/watch.js

Gulpfile.js
https://github.com/roscoevanderboom/MultiChain-Client/blob/master/gulpfile.js

athenawisdoms · 2020-04-13T04:33:53Z

@roscoevanderboom Thanks for the fast replies and your .js files.

I have replaced the 3 files assets.js, watch.js and gulpfile.js with your version in my copy of jschr/electron-react-redux-boilerplate. However, when I ran npm develop, the JS console of the electron app that appears has the error

SyntaxError: Unexpected token .
    at new Script (vm.js:83:7)
    at createScript (vm.js:265:10)
    at Object.runInThisContext (vm.js:313:10)
    at Module._compile (internal/modules/cjs/loader.js:712:26)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:798:10)
    at Module.load (internal/modules/cjs/loader.js:645:32)
    at Function.Module._load (internal/modules/cjs/loader.js:560:12)
    at Module.require (internal/modules/cjs/loader.js:685:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/athenawisdoms/Desktop/electron-app/build/renderer/components/Sidebar.js:10:1)

I have only added a Sidebar.css file and import it into a Sidebar.js file

/app/renderer/components/Sidebar.css

.container {
    background-color: #57 ;
}

/app/renderer/components/Sidebar.js

import React, { Component } from 'react';

import './Sidebar.css';

export default class Sidebar extends Component {
    render() {
        return (
            <div>
                <p>Sidebar</p>
            </div>
        )
    }
}

Not quite sure why this error is occurring... any help will be greatly appreciated!!

roscoevanderboom · 2020-04-13T04:47:09Z

Sorry. I'm not sure what is creating that error. Did you try the original suggestions made by pronebird?

edsu · 2020-04-14T00:58:54Z

Why not ship the boilerplate with CSS support? It seems like a pretty common thing to want to import a CSS file?

edsu · 2020-04-14T01:19:30Z

Ahh, I see that webpack isn't being used, and y'all want to keep the boilerplate agnostic. I can live with that, and understand the motivation.

roscoevanderboom · 2020-04-14T03:43:20Z

@athenawisdoms @edsu I forked and updated this boilerplate to include css files in any folder in the app/renderer path. Also updated Electron to latest.

https://github.com/roscoevanderboom/electron-react-redux-boilerplate

pronebird · 2020-04-14T08:49:09Z

Historically, this boilerplate uses CSS in JS. We could probably have a gulp set up out-of-box to support CSS though.

edsu · 2020-04-14T11:25:13Z

@roscoevanderboom thanks! I did manage to get CSS copying too. I'm new here, but it seems like a logical thing for this boilerplate to copy html, css and images by default--whatever your CSS preference is.

roscoevanderboom · 2020-04-14T12:03:21Z

@edsu you're welcome. This is a good boilerplate to work with. It's also pretty easy to setup extra browser windows or tray components.

If you want to import more file types, start by

adding them in assets.js ( take care to set path correctly and to export properly ),
then setup watch,js ( here you can choose to reload electron or just hotreload browser after changes have been made )
and finally add to gulp.js

But like pronebird said, CSS in JS is the way to go. It's easy to build global style classes, then add to / overwrite properties in individual components. Objects ftw!

Checkout MaterialUI templates. Them have great pre-made styles in JS

roscoevanderboom closed this as completed Sep 9, 2019

pronebird added the question label Sep 10, 2019

jschr mentioned this issue Mar 24, 2020

How do I import CSS modules ? #86

Closed

roscoevanderboom mentioned this issue May 1, 2020

I can't import bootstrap #95

Closed

jschr mentioned this issue Jun 28, 2020

How to include tailwind scss compilation in boilerplate? #96

Closed

davetbo-amzn mentioned this issue Aug 8, 2022

Question about importing css and scss. #126

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to add css files #80

how to add css files #80

roscoevanderboom commented Sep 9, 2019

pronebird commented Sep 9, 2019 •

edited

Loading

roscoevanderboom commented Sep 9, 2019

pronebird commented Sep 9, 2019

roscoevanderboom commented Sep 9, 2019

roscoevanderboom commented Sep 9, 2019

pronebird commented Sep 9, 2019 •

edited

Loading

pronebird commented Sep 10, 2019 •

edited

Loading

roscoevanderboom commented Sep 12, 2019

athenawisdoms commented Apr 12, 2020

roscoevanderboom commented Apr 13, 2020

roscoevanderboom commented Apr 13, 2020

athenawisdoms commented Apr 13, 2020

roscoevanderboom commented Apr 13, 2020

edsu commented Apr 14, 2020 •

edited

Loading

edsu commented Apr 14, 2020

roscoevanderboom commented Apr 14, 2020

pronebird commented Apr 14, 2020 •

edited

Loading

edsu commented Apr 14, 2020

roscoevanderboom commented Apr 14, 2020

how to add css files #80

how to add css files #80

Comments

roscoevanderboom commented Sep 9, 2019

pronebird commented Sep 9, 2019 • edited Loading

roscoevanderboom commented Sep 9, 2019

pronebird commented Sep 9, 2019

roscoevanderboom commented Sep 9, 2019

roscoevanderboom commented Sep 9, 2019

pronebird commented Sep 9, 2019 • edited Loading

pronebird commented Sep 10, 2019 • edited Loading

roscoevanderboom commented Sep 12, 2019

athenawisdoms commented Apr 12, 2020

roscoevanderboom commented Apr 13, 2020

roscoevanderboom commented Apr 13, 2020

athenawisdoms commented Apr 13, 2020

roscoevanderboom commented Apr 13, 2020

edsu commented Apr 14, 2020 • edited Loading

edsu commented Apr 14, 2020

roscoevanderboom commented Apr 14, 2020

pronebird commented Apr 14, 2020 • edited Loading

edsu commented Apr 14, 2020

roscoevanderboom commented Apr 14, 2020

pronebird commented Sep 9, 2019 •

edited

Loading

pronebird commented Sep 9, 2019 •

edited

Loading

pronebird commented Sep 10, 2019 •

edited

Loading

edsu commented Apr 14, 2020 •

edited

Loading

pronebird commented Apr 14, 2020 •

edited

Loading