Electron-forge: Should I import CSS in js file?

[chenzhiguo]

I use iview in my project, in renderer process like this:

import iView from 'iview';
import 'iview/dist/styles/iview.css';    // Use CSS

Vue.use(iView);

But, there is a error in console:

Uncaught SyntaxError: Unexpected token .
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Object.require.extensions.(anonymous function) [as .js] (D:\Projects\demo\node_modules\electron-compile\lib\require-hook.js:77:14)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (D:\Projects\demo\src\renderer.js:32:1)
    at Object.<anonymous> (D:\Projects\demo\src\renderer.js:72:3)

Should I use import .css file in .js file without webpack?

[MarshallOfSound]

You shouldn't import CSS in a JS file in any circumstance IMO. WebPack uses that technique as a result of CSS modules and it just working better with their bundling strategy (plus a bunch of other reasons I'm sure).

But in a world where you don't need to bundle and your entire browser is a commonJS environment, including CSS in JS makes very little sense. You should just add a link tag for it 👍

[chenzhiguo]

OK, I use link or @import is OK!
In my .vue file, Such as:

<style>
    @import url('./asserts/css/iview.css');
    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro'); 

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: 'Source Sans Pro', sans-serif;
    }

    #wrapper {
        background: radial-gradient(
                ellipse at top left,
                rgba(255, 255, 255, 1) 40%,
                rgba(229, 229, 229, .9) 100%
        );
        height: 100vh;
        padding: 60px 80px;
        width: 100vw;
    }

    #logo {
        height: auto;
        margin-bottom: 20px;
        width: 420px;
    }

    main {
        display: flex;
        justify-content: space-between;
    }

    main > div {
        flex-basis: 50%;
    }

    .left-side {
        display: flex;
        flex-direction: column;
    }

    .welcome {
        color: #555;
        font-size: 23px;
        margin-bottom: 10px;
    }

    .title {
        color: #2c3e50;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 6px;
    }

    .title.alt {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .doc p {
        color: black;
        margin-bottom: 10px;
    }

    .doc button.alt {
        color: #42b983;
        background-color: transparent;
    }
</style>

[mnemanja]

What happens with React?
Which approach do would you suggest for importing css in react components?

[malept]

Perhaps look for a Babel plugin that imports CSS modules?

[timsamart]

do we have a solution? importing in a link is currently a nono since we are using dynamic lybraries which should be updatable... Is there a workaround? FYI We can't use forge 6 due to regulations