use and bundle assets with your nodegui app
npm install parcel-plugin-nodeguiYou can see an example project that uses parcel and this plugin here.
> Disclaimer: this plugin is in its early stages. Bugs are probable. Feature requests, bug reports and contributions are most welcome!
require (much like web and React Native) 🎨require 🖼parcel plugin, your project has to use parcel for managing its bundle. Read about it here.bash
npm install --save-dev parcel-plugin-nodegui
`$3
Make sure that you select the node target when bundling your projects for the NodeGUI platform (using the build and watch commands). Read about project targets here.#### Example
Building for node target:
`bash
npx parcel build --target node src/index.tsx
`Watching for node target (auto bundle build upon file save):
`bash
npx parcel watch --target node src/index.tsx
`Plugins
$3
Import and use css with your NodeGUI windows's styleSheet prop.#### Usage
In order to use CSS in your NodeGUI app, simply require it:
`js
const style = require('./style.css');
`And use it with the
Window widget's styleSheet property:`jsx
...
`> Note: Do not forget that selectors in NodeGUI apps are the elements' ids, and therefore you should use the
#thisIsId selector in your stylesheets.#### Example
_style.css_
`css
#container {
flex: 1;
flex-direction: column;
min-height: '100%';
background: #4B4B4B;
}#text {
color: white;
}
`_app.jsx_
`jsx
const App = () => {
return (
styleSheet={require('./style.css')}
>
Hello, world
);
};
`#### Using with pre-processors (SASS \ LESS)
Simply follow the regular guide regarding how to use said pre-processors in your project:
* SASS: https://parceljs.org/scss.html
* LESS: https://parceljs.org/less.html
* Stylus: https://parceljs.org/stylus.html
The plugin will automatically utilize their output CSS in your project.
$3
Import and use image files with your NodeGUI's Image components.#### Usage
In order to use image assets in your NodeGUI app, simply require them:
`js
const image = require('./image.png');
`And use them with the
Image widget's src property:`jsx
``