Module build failed with Vue-CLI

[netstuff]

Hello. Thank you for this work :)
I try to use it with Vue-CLI through vue.conf.js with next config:

chainWebpack: config => {
    config.module
      .rule('scss')
      .use('sass-vars-loader')
      .loader('sass-vars-loader')
      .options({
        loader: 'sass-vars-loader',
        options: {
          syntax: 'scss',
          files: [
            path.resolve(__dirname, '@/assets/styles/contracts/variables.json'),
          ],
        },
      })
  },

But when project starts I have error in console for every using Vue-component:

Module build failed (from ./node_modules/sass-vars-loader/index.js):
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
    at assertPath (path.js:39:11)
    at Object.join (path.js:1155:7)
    at read (/Users/netstuff/Sites/bspb/ui/node_modules/fs-readdir-recursive/index.js:11:18)
    at requireFresh (/Users/netstuff/Sites/bspb/ui/node_modules/require-fresh/index.js:67:21)
    at Object.SassImports (/Users/netstuff/Sites/bspb/ui/node_modules/sass-vars-loader/index.js:39:46)

What I do wrong?

[dsc8x]

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

[netstuff]

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

[dsc8x]

Haha, no worries! 😄

[franciscolourenco]

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 🙂

[dsc8x]

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

[netstuff]

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.

[franciscolourenco]

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

[netstuff]

@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';
        `,
      },
    },
  },
}

[dsc8x]

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.

[franciscolourenco]

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

[netstuff]

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

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

[franciscolourenco]

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

[franciscolourenco]

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