Электронные Webpack Vue глобальные переменные

Question

Я пытаюсь часами заставить глобальные переменные работать в электронном виде с webpack и vue, но vue не может найти объявленную переменную.

webpack.config.js

{
    test: /\.scss$/,
    use: [
      "vue-style-loader",
      "css-loader",
      {
        loader: "sass-resources-loader",
        options: {
          resources: 'src/assets/scss/custom/_variables.scss'
        }
      }
    ]
  }

App.vue

background-color: $gray;

Ошибка:

background-color: $gray-900;
                     ^
        Undefined variable: "$gray-900".

Answer 1

Возможно, проблема в том, что путь resources не был правильно решен из корневого каталога, поэтому они никогда не были определены.

Возможное решение

Предполагается, что файл webpack.config.jsв том же каталоге, что и src/:

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