using_css_frameworks.md

Using CSS frameworks

Although this may seem like a no brainer, I'd suggest you import your third-party CSS libraries into webpack using the style-loader, which is already setup for you.

Use Case

Say you want to use bootstrap, bulma, or materialize for your electron app. Go ahead and install from npm inside your app directory like you normally would, but instead of attaching the asset to index.ejs we will import the CSS in our JavaScript, specifically in app/src/renderer/main.js.

Example

Let's install bulma inside our app directory.

npm install bulma --save

Then inside app/src/renderer/main.js let's add this line.

import 'bulma/css/bulma.css'

Now webpack will know to bundle bulma into our app and make it available in our production builds.

Using Sass/SCSS globals

When using pre-processors for CSS, it's very beneficial to make use of global variables/mixins throughout all Vue component files. Here's how to make that happen.

Use Case

This example demonstrates how to apply a globals.scss to all Vue component files. This documentation assumes you have already setup sass-loader in your development environment (more info).

Define your globals

app/src/renderer/globals.scss

$brand-primary: blue;
$brand-accent: turquoise;

Inject globals.scss directly into node-sass

webpack.renderer.config.js Line 50

loaders: {
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./app/src/renderer/globals"',
  scss: 'vue-style-loader!css-loader!sass-loader?data=@import "./app/src/renderer/globals";'
}

Use your globals

Some Vue Component File

<style lang="scss">
  body { color: $brand-primary; }
</style>