$lightShades is not defined in app.scss

[Paul-Hadfield]

Following the web article, once you add styles it complains that it can't find the variables defined in _colors.scss. Adding @import "../globalstyles/colors"; to top of relevant SCSS files did resolve issue for me.

"yarn add node-sass sass-loader" looks like it should do same thing, but doesn't seem to work for me, yarn indicates it is installed but won't do anything.

[Paul-Hadfield]

I did add a vue.config.js with content below, but that didn't seem to solve it. Might be an issue with my set up as I'm getting up to speed with this, but couldn't see anything in project that would automatically load the common _colors.scss file

module.exports = {
    css: {
      loaderOptions: {
        scss: {
          data: `@import "@/assets/globalstyles/_colors.scss";`
        }
      }
    }
  };

[Bulletninja]

I'm getting the exact same issue. Can't use the color vars.

[Bulletninja]

I had to add @import "../globalStyles/_colors.scss"; on top of InputForm.scss and Panel.scss

Then went to build/utils.js to the cssLoader section and removed the options senction:

    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }

and it finally worked for me.