Electron-vue: [Question] Import global SASS variables

[NZX-DeSiGN]

Hi,

I'm using electron-vue and keen-ui for my application and I would like to import custom SASS variables into every component. The link below describes how to do it, but I don't understand how to tweak Webpack config.
Could you help me make it work ?

Link : https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md#customization

Thanks,
Nicolas

[SimulatedGREG]

@NZX-DeSiGN

Hey, interestingly enough I just had to solve this last week. Simply modifying line 51/52 in webpack.renderer.config.js to something like...

// modify both Sass and SCSS
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";'

...where the @import loads your Sass/SCSS file with your global variables. Please note that this will only make style variables available in your Vue component files. If you have other *.sass or *.scss files that need the variables as well, just make sure to import those in App.vue instead of importing somewhere in JS (such as src/renderer/main.js).

[NZX-DeSiGN]

@SimulatedGREG

Amazing it works ! I should have asked earlier, I searched for 3 hours yesterday ...
I think you could add the trick in the "Using pre-processors" or "Using CSS frameworks" documentation section; this trick is not documented in any webpack related package.

Thanks again for your help!

[SimulatedGREG]

Yes, for sure. Going to add some Docs about this.

[hlipeter]

@SimulatedGREG OK,As you said ,and i instead of what you said ，but it is not work either！I have import *.scss in App.vue ,see my webpack.renderer.config.js
and My project structure changed a little bit
I download this project yesterday , my computer system OS X 10.11.2