Importing Styles

[JoeRoddy]

Hey Alex!

How would you recommend adding css or scss to this project?

There aren't any webpack files, so I'm unclear on how I can add the appropriate file loaders.

Thanks!

[alexvcasillas]

Hello @JoeRoddy !!
Sorry for the late response, I was out for the weekend so I didn't have time to answer.

We could implement a solution for scss this way : )

npm install --save node-sass-chokidar

Alternatively you may use yarn:

yarn add node-sass-chokidar

Then update the package.json to add this scripts:

"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",

This way you can launch the watch-css and let node-sass-chokidar handle all the scss compilation for you.

Haven't tested this solution but maybe you could give it a try and if it works, please, make a PR and we implemented it into the project : )

Also please note that many of the dependencies at this project are outdated so maybe it could be some sort of dependencies conflicts when upgrading : )

I'll try to take a look to the project tonight and see what I can do : )

Once again, thanks for opening the issue.

[alexvcasillas]

Hey @JoeRoddy !

How is it going? I was working on another side-project to replace this one with a more easy to use boilerplate. With almost 0 config.

Maybe you'll find it more interesting: https://github.com/alexvcasillas/reactron

[JoeRoddy]

Hey Alex, just saw this.

I'll try to out the css for this repo and make a pr if I can get it working.

I'll take a look at the new repo tonight. I really liked this one, because it was one the only one I could find that packaged out of the box into an installer, but wasn't incredibly bloated / opinionated. Excited to try it out.

I would really like a simple create-react-desktop-app esque thing. Really missing a good tool like that for electron.

[alexvcasillas]

Then you would love the new one because it's even better with out of the box support :)

Still need to add the package to certain OS feature, at the moment, it only packages to the OS you're executing the command at.

The new solution is not opinionated at all and comes with lot's of stuff. And if you want SCSS or SASS you only need to import it to your package.json like yarn add node-sass and you're ready to go!

I'll be working on this new project a little more so will be also glad to hear feedback from you!

Once again, thanks for the answer : )

[JoeRoddy]

I have the watch-css / scss > css stuff working. The only problem with adding styles to this repo is that it looks like it's not set up with a css-loader under the hood.

ie:
import "./styles/app.css";

Fails with "Uncaught SyntaxError: Unexpected token {" because it looks like it tries to parse it as a JS file. Not really sure how to tweak the Webpack configuration or if there even is one under the hood?

It works well if you just import the css directly in the html file, but IMO it's not worth it to add to this repo if you can't import css into the components. Maybe you'll have more luck.

Here's the package.json that I ended up with.

Going to play around with reactron now.

[alexvcasillas]

This repo doesn't have any css-loader under the hood.
Since this repo just rely on babel at compile time it would need more tweaking to make CSS/SCSS imports available because it doesn't depend on webpack or any bundle.
See? "private:compile": "babel app/ --copy-files --out-dir build"

I know this will be dissapointing and I have to say sorry about it 😞

I started this repo long time ago and needs much time to make something solid, that's why I'm working on this new bundle (Reactron) that will be delicious :)