Vue-cli: Loading a global scss mixin / variable file in version 3

[rico]

Hi

How does one achieve this - Loading a global settings file

{
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/style/_variables.scss')
  }
}

using vue-cli 3.0.0-beta.6?

From information in the readme, I thought something like this in vue.config.js:

css: {
  loaderOptions: {
    sass :
    {
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, 'src/scss/_variables.scss'),
      },
    },
  }
}

will do the trick. But I'm getting an error if I try to use a a variable (e.g. $primary) in a component:

color: $primary;
      ^
  Undefined variable: "$primary".
  in /src/App.vue (line 23, column 12)

[krienow]

See: https://github.com/vuejs/vue-cli/blob/dev/docs/guide/css.md#passing-options-to-pre-processor-loaders

EDIT: Fixed the link.

[rico]

Ah, that simple ... thanks!

[bbugh]

Note that this preprocessor-loader is not hot reloaded. You'll have to shut down and restart the server if you make changes to see them.

[Samuelfaure]

@krienow Link is dead, can you provide a new one please ?

[ommehaz]

@Samuelfaure https://github.com/vuejs/vue-cli/blob/dev/docs/guide/css.md#passing-options-to-pre-processor-loaders

[Spiegelberg]

i still get undefined. with less tho

css: {
    modules: false,
    loaderOptions: {  
      less: {
        data: '../../shared/lasso/style/basestyle.less'
      }
    }
  }

[wangyalijas]

css: {
    loaderOptions: {
      sass:
        {
          data: './src/assets/styles/theme/_colors.scss',
        },
    },
  },

He still reported the same mistake

[baptLesta]

Same here..

[rico]

This works for me:

  css: {
    loaderOptions: {
      sass :
        {
          data: fs.readFileSync('src/sass/_global.scss', 'utf-8'),
          includePaths: [
            path.resolve(__dirname, 'src/sass')
          ]
        },
    }
  },

[upstroke]

Same problem here with:

css: {
        loaderOptions: {
            sass: {
                data: "@import \"@/scss/settings.scss\";",
            }
        },
        sourceMap: true
    }

[yinsang]

i still get undefined. with less tho

css: {
    modules: false,
    loaderOptions: {  
      less: {
        data: '../../shared/lasso/style/basestyle.less'
      }
    }
  }

Offical documents may make a misunderstanding.
Sass language can use data to push a .scss file to loader, but less can't
If you need variables only, you may need

less:{
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff'
        }
      }

OR
import variable.less to everywhere you need.
If you need to import base.less to some files, you may need to use reference options. https://github.com/webpack-contrib/less-loader/issues/7

[yinsang]

Same problem here with:

css: {
        loaderOptions: {
            sass: {
                data: "@import \"@/scss/settings.scss\";",
            }
        },
        sourceMap: true
    }

data: `@import "~@/variables.scss";`

will work.

[hezhongfeng]

in sass-loader v8

  css: {
    extract: false,
    loaderOptions: {
      sass: {
        prependData:
          '@import "@/common/style/var/color.scss";@import "@/common/style/var/size.scss";'
      }
    }
  },