Variables undefined when use sass-loader.options.data attribute about sass-vars-loader HOT 19 OPEN

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

oh yeah, absolutely 👍

from sass-vars-loader.

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

from sass-vars-loader.

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

from sass-vars-loader.

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

from sass-vars-loader.

@epegzz Any news on this? :)

from sass-vars-loader.

The year is not over yet! 😆

from sass-vars-loader.

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

from sass-vars-loader.

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

from sass-vars-loader.

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.

from sass-vars-loader.

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 🤔

from sass-vars-loader.

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?

from sass-vars-loader.

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') // <--- 
          ],
        })
    )
  }
}

from sass-vars-loader.

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 :(

from sass-vars-loader.

Could you please implement this? #23
I'm in the same boat. Changing the order manually inside node_modules works for me.
Thank You! :)

from sass-vars-loader.

@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 :)

from sass-vars-loader.

Thank You very much! And happy new year :)

from sass-vars-loader.

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

from sass-vars-loader.

I think we can close this...

from sass-vars-loader.

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

from sass-vars-loader.