Variables undefined when use sass-loader.options.data attribute

[netstuff]

Hello! I use sass-vars-loader with Vue Cli 3 and I try to move common scss-files to app config:

const path = require('path');

module.exports = {
  chainWebpack: (config) => {
    const moduleTypes = ['vue-modules', 'vue', 'normal-modules', 'normal'];
    moduleTypes.forEach(moduleType =>
      config.module
        .rule('scss')
        .oneOf(moduleType)
        .use('@epegzz/sass-vars-loader')
        .loader('@epegzz/sass-vars-loader')
        .options({
          syntax: 'scss',
          files: [
            path.resolve(__dirname, 'src/assets/styles/contracts/variables.json'),
            path.resolve(__dirname, 'src/assets/styles/contracts/icons.json')
          ],
        })
    )
  },

  css: {
    loaderOptions: {
      sass: {
        data: `
          @import '~@/assets/styles/vars';
          @import '~@/assets/styles/util';
          @import '~@/assets/styles/func';
          @import '~@/assets/styles/mixins';
          @import '~@/assets/styles/colors';
        `,
      },
    },
  },
}

But on app loaded I have got an error: "Undefined variable: $palette". It works properly, when I importing common scss-files directly, but I want to import it all in one place.

Can you help me?

[epegzz]

So what you're basically saying is, that the @import '~@/assets/styles/...' is not working?

[epegzz]

Ah, no, the imports are working, but the files don't see the vars from the sass-vars-loader, right?

[netstuff]

Thank you for reply, @epegzz!

Ah, no, the imports are working, but the files don't see the vars from the sass-vars-loader, right?

Yes, it is! I think there is inproper loading order. But I am not sure.

[epegzz]

Basically what the sass-vars-loader is doing, is converting this:

@import '~@/assets/styles/vars';
@import '~@/assets/styles/util';
@import '~@/assets/styles/func';
@import '~@/assets/styles/mixins';
@import '~@/assets/styles/colors';

to this:

$var1=value1
$var2=value2
...
@import '~@/assets/styles/vars';
@import '~@/assets/styles/util';
@import '~@/assets/styles/func';
@import '~@/assets/styles/mixins';
@import '~@/assets/styles/colors';

So, as far as I understand Sass, the code in the @imported files should have access to those global vars 🤔

[epegzz]

I'm not really familiar with the chainWebpack method. Could it be that the css command is actually overwriting the results from sass-vars-loader?

[epegzz]

What about putting the @imports in a .sass file and load it as part of the sass-vars-loader?

const path = require('path');

module.exports = {
  chainWebpack: (config) => {
    const moduleTypes = ['vue-modules', 'vue', 'normal-modules', 'normal'];
    moduleTypes.forEach(moduleType =>
      config.module
        .rule('scss')
        .oneOf(moduleType)
        .use('@epegzz/sass-vars-loader')
        .loader('@epegzz/sass-vars-loader')
        .options({
          syntax: 'scss',
          files: [
            path.resolve(__dirname, 'src/assets/styles/contracts/variables.json'),
            path.resolve(__dirname, 'src/assets/styles/contracts/icons.json'),
            path.resolve(__dirname, 'src/assets/styles/imports.scss') // <--- 
          ],
        })
    )
  }
}

[epegzz]

Hm, this would actually not work, since the sass files always come first. That's a stupid design! 🙈 😆

I could change that. It's basically #23

[netstuff]

What about putting the @imports in a .sass file and load it as part of the sass-vars-loader?

I have tried it and have got error while parsing .scss-file :(

[dschox]

Could you please implement this? https://github.com/epegzz/sass-vars-loader/issues/23 I'm in the same boat. Changing the order manually inside node_modules works for me. Thank You! :)

[epegzz]

@dschox unfortunately I'm really busy lately and won't have the time to work on this currently. But I'm happy to merge any incoming PR :)

[dschox]

@epegzz I think a PR is out of my league :) Is it possible you can do this this year? ;)

[epegzz]

Is it possible you can do this this year? ;)

oh yeah, absolutely 👍

[dschox]

@epegzz Any news on this? :)

[epegzz]

The year is not over yet! 😆

[epegzz]

@dschox file order is now respected in v6.0.0. Thanks for your patience 👍

[dschox]

Thank You very much! And happy new year :)

[franciscolourenco]

@epegzz I ran into the same issue and this works around the problem, thanks! 👍

[dschox]

I think we can close this...

[franciscolourenco]

Maybe a mention in the README to the alternative data/prependData option.