[QUESTION] - Importing css stylesheets?

[LeamDelaney]

Sorry if this has been asked before, but I couldn't find it in the nodegui docs, or on this repo's issues.

What I want to do

I have cloned the react node gui starter application, and I am starting to put together the foundation of my application in there. I want to import a CSS file in my application, so that it may be used to style my application. I have seen examples of people adding CSS into their typescript or javascript, but I'd like to avoid that if possible, as it makes for massive files, and coupling code with UI styling.

[a7ul]

Hey @LeamDelaney

You cant use a css file directly since nodegui doesnt use a browser underneath.

What you can do though inorder to separate css styles is to create a separate styles.js file and add your styles there.

So your styles.js file would look like:

const windowStyle = `
  margin: 0;
`
const btnStyle = `
  color: blue;
`

module.exports = {
  windowStyle,
  btnStyle
}

and then you can import these on your application code.

[LeamDelaney]

Hey @master-atul - thanks for the quick response - I'd like to ask another question related to this!

Since I already have a fairly large, well thought out series of CSS files, is there a way for me to use this approach to have the styles.js file bring in entire css files and make the different elements of it available? Rather than having to rewrite everything?

[a7ul]

Hmm. First thing to note here is that NodeGui supports Qt's stylesheet syntax (which is very close to browser's css but with some changes). So I am not sure even if you import the said css files it would work as expected. Neverthless, if you really want to do it, it is technically possible to tell webpack to stringify all css files into one and maybe include that as a string which can then be passed to setStyleSheet or style prop.

But there is a high chance that it wont work as expected.
I suggest you read here to understand more about it : https://react.nodegui.org/docs/guides/styling

[LeamDelaney]

Ah ok - So does this mean I can't use things like bootsrap with react nodegui?

I guess I was under the impression that this was a whole other type of tool. I wanted to use react to build out a desktop application - but I wanted to keep my logic and UI completely separate. Would electron be more suited to my needs?

[a7ul]

Yes so you can use react to build out a desktop application with nodegui.
This is very similar to react native for mobile apps where you cant use things like bootstrap.
The primary difference here is the browser. Bootstrap is a web framework/library and relies on a browser environment. React NodeGui uses Qt underneath instead of a full fledged browser. This is what gives it the low memory and cpu footprint.

Nevertheless,
If you want to use browser based frameworks then you would need something like electron.

[yumindev]

But this project, https://github.com/ruslang02/discord-qt, is using scss file.