search

SimulatedGREG / electron-vue

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
https://simulatedgreg.gitbooks.io/electron-vue/content/
MIT License
15.47k stars 1.54k forks source link

Question regarding static CSS file #463

Closed voveson closed 6 years ago

voveson commented 6 years ago

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:

  1. Where is the proper place to put this file? I am assuming I should use the /static directory?
  2. 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!

pixeldesu commented 6 years ago

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

voveson commented 6 years ago

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

onekiloparsec commented 6 years ago

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 :

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:



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...
SimulatedGREG commented 6 years ago

The example that @onekiloparsec posted above is probably the most intended way to import custom style sheets into an application. Remember this webpack setup doesn't care if you are importing JS or CSS. So if you have a bunch of JS files, then you can surely import a bunch of CSS files as well.

Vict0r-Chen commented 3 years ago

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...

Frustratingly, for background, this doesn't work on :Focus

Vict0r-Chen commented 3 years ago

Finally, I used Base64 as the url of backgroud-image: background-image: url("data:image/png;base64,...")