Как сделать во все scss файлы автозапуск другого scss в nuxt?

Question

[olezhenka]

Куда запихнуть конфигурацию в файле nuxt.config чтобы scss компилятор сначала запускал файл с scss переменными и только потом компилировал нужный файл?
Ибо везде писать @import('../../assets/plugins/_var.scss'); не оч круто...

Answer 1

[olezhenka]

Решение:
Есть плагин для самого nuxt — nuxt-sass-resources-loader

// nuxt.config.js

modules: [
    'nuxt-sass-resources-loader'
  ],
  sassResources: [
    resolve(__dirname, 'assets/_colors.scss')
  ],

Answer 2

[Егор Живагин]

Сделайте файл index.scss
В него:

import '../../_var.scss';
import '../my.scss';
import 'huihui.scss';
...

Ну, просто импортируете все файлы. Сборщику скармливаете только этот файл. Усё.

PS - не шарю в webpack-e, но коллега на проекте его настроил так, что вместо длиннющего ../../../ ... можно писать просто @assets , @components , ... Погуглите, это прям радует

Comments

[Сергей delphinpro]

Алиасы можно создавать, это конечно укорачивает запись.
Но теряется поддержка путей в IDE (например, при рефакторинге). Самая продвинутая и то не умеет считывать алиасы.

index.scss в контексте Vue не прокатывает. Используя однофайловые компоненты, файл с переменными приходится импортировать в каждый из них.

[Егор Живагин]

Сергей, точно, алиасы, забыл слово. Пути - это, конечно, минус, но не такой существенный, мне кажется.

Да, точно, тогда надо в сторону сборщика смотреть

[wiyod]

Это не будет работать, к сожалению. ТС правильно выложил ссылку на модуль для вебпака. Надо пилить самому. Жаль я Стайлус юзаю.