Electron-vue: [Help] Importing css errors, alias not working.

[Ampix0]

Found an issue or bug? Tell me all about!

Sorry, this may not be a bug and is probably more likely an issue on my end, please forgive me if so.
I am trying to make use of SCSS, the vue-loader seems to already be included in the config, and I have installed the needed modules. However I am unable to import the SCSS sheet containing my variables and mixins.

Describe the issue / bug.

Reddit post: https://www.reddit.com/r/vuejs/comments/66x5rm/having_trouble_importing_scss_undefined/

Error: http://imgur.com/a/ZUcLm

No matter what I have tried I can not get the correct path to the file or there is some other issue with the configuration. The var.scss file needs to be loaded into the app.vue file.

The alias doesn't appear to work as well which makes me think maybe the path isn't the issue.
I have tried many different path variations but no luck.

• ./var
• ./var.scss
• var
• var.scss
• ~/var.scss
• ~/var
• ~var

#

How can I reproduce this problem?

Attempt to import css

#

If visual, provide a screenshot.

http://imgur.com/a/ZUcLm

#

Tell me about your development environment.

• Node version: 6.9.3
• NPM version: 3.10.10
• vue-cli version: (if necessary)
• Operating System: Windows 10 build 1703

If you are looking to suggest an enhancement or feature, then feel free to remove everything above.

[NadhirBoukhenifra]

Hi,
try this: (it should work :))

@import './../var.scss'

if you want to put your scss files in src/assets/scss
the import should be like this:

@import './../assets/scss/var.scss'

other notice:
the path is from App.vue if you work with another component inside components folder then you must add another level to the path (i mean /../)

@import'./../../assets/scss/var.scss'

look at the picture my folder named css

[SimulatedGREG]

@Ampix0

You're initial try with @import "renderer/var.scss"; was just missing the ~. Change it to @import "~renderer/var.scss";.

One extra thing to note, if you are wanting to use a variables file you would have to import this file in every component that needs it. But luckily, you can actually import a variables files directly into the loader so all components have access to it without having to manually import it every time.

This can be done by updated the vue-loader configuration in webpack.renderer.config.js at line 54.

scss: 'vue-style-loader!css-loader!sass-loader?data=@import "~renderer/vars.scss";'

[Ampix0]

@SimulatedGREG unfortunately that is not working as well, that's currently how i have it written. I'm going to try @NadhirBoukhenifra suggestions now as well and report back.

error:

         ERROR in ./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-09a923c1!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./app/src/renderer/App.vue
         Module build failed:
         undefined
         ^
               File to import not found or unreadable: ~renderer/var.scss.
         Parent style sheet: stdin
               in C:\Users\Ampix0\Documents\GitHub\electron-vue\tickr-for-robinhood\app\src\renderer\App.vue (line 15, column 1)
          @ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-09a923c1!./~/sass-loader/lib/loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./app/src/renderer/App.vue 4:14-269 13:2
-17:4 14:20-275
          @ ./app/src/renderer/App.vue
          @ ./app/src/renderer/main.js
          @ multi (webpack)-dev-server/client?http://localhost:9080 webpack/hot/dev-server ./app/src/renderer/main.js

[Ampix0]

@NadhirBoukhenifra your direct relative path did work. So somehow my issue is resolving the alias. Thank you for getting me this far.

[SimulatedGREG]

@NadhirBoukhenifra

Do you have a project repo I could look at?

[Ampix0]

@SimulatedGREG almost untouched.
https://github.com/Ampix0/ticker-for-robinhood

[SimulatedGREG]

@Ampix0

Your vars.scss isn't in your app/src/renderer folder like your original screenshot implied. Moving that file to the renderer folder and using the method of injecting into the loader itself that I mentioned above should do the trick (with @import "~renderer/vars.scss";).

[Ampix0]

@SimulatedGREG Well that's embarrassing... Not sure if the file was somehow moved or if the indenting in my IDE tricked me. Either way I apologize for wasting everyone's time!

[SimulatedGREG]

No problem, I know that struggle as well. Glad we got this sorted out.

[ChucKN0risK]

Hello everyone,

I has an issue for importing my styles. I followed the instructions from the "Using Pre-Processors" page in the doc.

Here is my folder architecture:

And here is what I wrote in consequence in my webpack.renderer.config.js:

{
    test: /\.vue$/,
        use: {
            loader: 'vue-loader',
            options: {
                loaders: {
                    sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./src/renderer/scss/style"',
                    scss: 'vue-style-loader!css-loader!sass-loader?data=@import "./src/renderer/scss/style";'
            }
        }
    }
},

Unfortunatley this failed to compile and I got the following error message:

I managed to fix this by changing the source in my webpack.renderer.config.js like so:

loaders: {
    sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "~renderer/scss/style"',
    scss: 'vue-style-loader!css-loader!sass-loader?data=@import "~renderer/scss/style";'
}

[davidAlittle]

I'm finding that I have an issue related to this one:
I've added a globals.scss file, and in it I'm using \@import. I've changed my webpack file as suggested above, and everything works, using relative paths.

The problem is that this breaks nesting folders:
If I have a vue file in components folder, and set the import path in my globals relative to that, it works as discussed above. But if I ALSO place a sub-component vue file in a folder within (folowing the suggested file layout, e.g. a LandingPage.vue file, and a LandingPage folder with vue files used on the parent page), then the relative paths are broken in the sub component.

I tried using the ~@ alias method, but that doesn't seem to work.

[edit] I was close with the relative paths alias, and the solution was even mentioned in the very first comment above: ~/../node_modules... was the correct way to use relative paths.