Vue.js: как объявить глобальные переменные LESS?

Question

[sitsiin]

Собственно, нужно объявить глобальные переменные LESS, чтобы не прописывать их в каждом компоненте. Пытался воспользоваться примером из документации:

const path = require('path')
module.exports = {
    pluginOptions: {
        'style-resources-loader': {
          'preProcessor': 'less',
          'patterns': [
            path.resolve(__dirname, './src/styles/*/*.less'),
          ]
        }
      },
    css: {
      loaderOptions: {
        sass: {
          additionalData: `@import "~@/variables.sass"`
        },
        scss: {
          additionalData: `@import "~@/variables.scss";`
        },
        less:{
          globalVars: {
            primary: '#fff'
          }
        }
      }
    }
  }

Выдаёт ошибку:

color: @primary;
             ^
Variable @primary is undefined
      in /home/clfs20/VUE/vue-module/src/components/atca/module.vue?vue&type=style&index=0&id=492c98ec&lang=less&scoped=true (line 97, column 15)

Если в стилях самого компонента объявить переменную следующим образом:
@primary: #fff;
то код выполняется без ошибок.
Пробовал так же прописывать переменные в файле и импортировать уже сам файл - так же безрезультатно.

Comments

[Михаил]

https://github.com/webpack-contrib/less-loader#options

Answer 1

[sitsiin]

Как оказалось, пример из документации прекрасно работает.

Я запускал сервер для разработки с помощью команды:
npm run serve
оставлял его запущенным, смотрел результаты изменений конфигурации в браузере. Но нужно, оказывается, после каждого внесения изменений в конфигурационный файл останавливать сервер и запускать его снова.