Module build failed with Vue-CLI about sass-vars-loader HOT 14 CLOSED

@netstuff Try @epegzz/sass-vars-loader instead of sass-vars-loader :)

from sass-vars-loader.

Nice plugin 👍

Since this might be helpful to other people, the right way to configure this with Vue CLI (v3.8.4) is:

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

I would also consider adding this to the documentation 🙂

from sass-vars-loader.

or inside of <style> use @import '~@/assets/styles/stylesmyfile.scss' instead of a relative import - might fix the problem too

from sass-vars-loader.

@epegzz , thank u very much! I feel ashamed :(

from sass-vars-loader.

Haha, no worries! 😄

from sass-vars-loader.

Thanks @franciscolourenco! I opened #33. The documentation could use some general refresh anyways :) 👍

from sass-vars-loader.

Thanks @franciscolourenco! All works, but I don't understand how should I use it :(
I see that the my variables.json file is loaded, because I saw SCSS-compiler errors on starts when it has errors. But when variables.json is cleaned from errors I try to use some of it's variables in other file: variables.scss and got an error: Undefined variable: "$fontRem".

variables.json

{
  "fontRem": 14,
  "gridColumns": 12,
  "gutterSize": 8
}

and variables.scss

/* Global variables. */
$gridColumns: 16;
$defaultRem: $fontRem;

Please, help me to find proper way to use this plugin.
Thank you.

from sass-vars-loader.

@netstuff would need to see your vue.config.js

from sass-vars-loader.

@netstuff would need to see your vue.config.js

I found out that variables.json already working in Vue one-file components! Yo!
But the problem steel remains for *.scss files.

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

  css: {
    loaderOptions: {
      sass: {
        data: `
          @import '~@/assets/styles/global';
          @import '~@/assets/fonts/uikit/style.css';
        `,
      },
    },
  },
}

from sass-vars-loader.

I have not much knowledge about vue (in fact none at all 😄) but my suspicion would be, that the sass files are processed before the @epegzz/sass-vars-loader is run.

from sass-vars-loader.

@netstuff how are you importing the *.scss file you are having problems with?

from sass-vars-loader.

@netstuff how are you importing the *.scss file you are having problems with?

Using @import directive within <style lang="scss"> section of a component.

from sass-vars-loader.

You might need import them in the <script> of js file with import '@/styles/myfile.scss'

from sass-vars-loader.

or inside of <style> use @import '~@/assets/styles/stylesmyfile.scss' instead of a relative import - might fix the problem too

It works! @franciscolourenco, thank u very much!

from sass-vars-loader.