VueJS игнорирует глобальный импорт

Question

Я пытаюсь импортировать файл .less в свой App.vue, чтобы его содержимое было доступно для всех компонентов.

Я создаю пример приложения, подобный этому:

vue create less_test

затем я устанавливаю less npm пакетов

cd less_test
npm install less less-loader --save-dev

Я создаю этот простой less файл в src/

_variables.less

//  Colors
@yellowish: #E19525;

Затем HelloWorld.vue Я изменяю <style> на следующее:

<style lang="less" scoped>
.hello {
  background-color: @yellowish;
}
...
</style>

И App.vue к этому:

<style lang="less">
@import "_variables.less";
...
</style>

Но когда я пытаюсь собрать, я получаю эту ошибку:

.hello {
  background-color: @yellowish;
                  ^
Variable @yellowish is undefined

Как я могу импортировать глобальный файл .less, не импортируя егона каждый компонент?

Answer 1

Я просто добавляю <style src="@/path/to/_variables.less" lang="scss"></style> в мой App.vue.