Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question regarding static CSS file

See original GitHub issue

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!

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:6 (1 by maintainers)

Top GitHub Comments

19reactions

onekiloparseccommented, Jan 25, 2018

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…

1reaction

pixeldesucommented, Dec 6, 2017

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