Electron-vue: Question regarding static CSS file

Created on 22 Nov 2017 · 6Comments · Source: SimulatedGREG/electron-vue

First, thanks for this awesome project! It's been a huge help to give me a starting point for my app.

I am using ElementUI in my project, and I have generated a custom theme. I have two questions about how to include this stylesheet in my project:

Where is the proper place to put this file? I am assuming I should use the /static directory?
How should I be including the file? I know that /src/index.ejs automatically includes any stylesheets that are imported in /src/renderer/main.js (for example, import 'bulma/css/bulma.css'). But as this is a static file and not part of a node module, I cannot import the stylesheet in this way.

My current solution is to place the file in the /static directory, and manually add it to the <head> tag in /src/index.ejs (eg. <link rel="stylesheet" href="static/theme.css">), but will that work in production?

Thanks!

question

Source

voveson

👍1

Most helpful comment

I had similar questions. I found it suprisingly complicated to go through the number of possibilities, without reading tons of barely-related documentation, given that you have to build the app to check whether the production app is also ok, while its config is different.

I :

have a global bootstrap theme css
have a generated custom style (bought somewhere) generated-custom-style.css and that refer to some fonts (FontAwesome & open-iconic) with paths like ../fonts
a personal style that tweaks the one above: my-style-global-tweaks.css
import fonts from Google
use fontawesome with <i class="fa fa-...">
have some static icons and images
want to use some icons in css's files like url('<path>');

Finally, after many trials and errors, I came up with the following setup:

node_modules/ (with bootstrap installed through npm)
static/
├─ img/
│  └─ icon1.png
│  └─ icon2.png
src/
│  └─ index.ejs
│  ├─ main/
│  │  ├─ index.dev.js
│  │  └─ index.js
│  ├─ renderer/
│  │  ├─ assets/
│  │  │  ├─ css/
│  │  │  │  └─ font-awesome.min.css
│  │  │  │  └─ open-iconic-bootstrap.css
│  │  │  │  └─ generated-custom-style.css
│  │  │  │  └─ my-style-global-tweaks.css
│  │  │  ├─ fonts/
│  │  │  │  └─ fontawesome-webfont.ttf (+ woff, woff2 etc...)
│  │  │  │  └─ open-iconic.woff (etc...)
│  │  │  ├─ img/
│  │  │  │  └─ icon1.png (yes duplicate from /static... )
│  │  │  │  └─ icon2.png

and then:

In my-style-tweaks.css, I can use background: url('~@/assets/img/...') (note the ~@/, coming from here).
Inside any Component.vue file, in the <template> section, I can use <img id="logo" src="static/img/logo-circle.png"> (note the absence of any ~, @, ./ etc...)
In src/renderer/main.js I have a line import 'bootstrap3/dist/css/bootstrap.min.css'
In the <style> section of the App.vue file, I load all global stuff:

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'arcsecond-uploader'
  }
</script>

<style>
  @import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic');
  @import url('https://fonts.googleapis.com/css?family=Oswald:400,700,300');
  @import url('https://fonts.googleapis.com/css?family=Inconsolata');
  @import url('~@/assets/css/font-awesome.min.css');
  @import url('~@/assets/css/open-iconic-bootstrap.css');
  @import url('~@/assets/css/generated-custom-style.css');
  @import url('~@/assets/css/my-style-global-tweaks.css');
</style>

It works in dev and prod.

I'm happy if anyone come up with a better solution. As for now, I'll try to produce some real stuff...

onekiloparsec on 25 Jan 2018

👍9 ❤4 😄3 🎉2 🚀1

All 6 comments

There's a guide for the usage of static files in the documentation, right here!
https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html

pixeldesu on 6 Dec 2017

👎1

Yes, I've seen that. However, there are no examples that fit my use case.

voveson on 6 Dec 2017

I :

have a global bootstrap theme css
have a generated custom style (bought somewhere) generated-custom-style.css and that refer to some fonts (FontAwesome & open-iconic) with paths like ../fonts
a personal style that tweaks the one above: my-style-global-tweaks.css
import fonts from Google
use fontawesome with <i class="fa fa-...">
have some static icons and images
want to use some icons in css's files like url('<path>');