Не могу получить доступ к глобальным переменным SASS из моего компонента

Question

В моем приложении Nuxt я загружаю весь свой SASS следующим образом:

css: [
  '~assets/scss/main.scss'
],

Он отлично работает, за исключением случаев, когда я пытаюсь использовать некоторую переменную SASS из компонента.

<style lang="scss">
.container {
    background-color: $white;
}
</style>

В этом случае я получаю это сообщение об ошибке:

SassError: Неопределенная переменная: $ white

Тем не менее, все SCSS, содержащиеся в файле SASS, гдеопределенная переменная работает во всем приложении.

Как будто приложение в целом знает эти файлы, но каждый отдельный компонент не знает.

Что происходит?

Answer 1

Ref:

SassError: Неопределенная переменная: $ white

Каждый <style lang="scss"> компилируется индивидуально. Вам нужно @import файл, который определяет $white в вашем компоненте, прежде чем парсер узнает, что означает $white.

Именно поэтому большинство фреймворков хранят свои переменные в файле _variables.scss, который импортируется ввсе остальные файлы / контексты SCSS.

_variables.scss даже не загружается на страницу, потому что в большинстве случаев он фактически не содержит никаких правил. Он содержит только определения переменных, которые импортируются в другие файлы .scss, которые выводят .css.

---

Ссылка:

Тем не менее, все SCSS, содержащиеся в файле SASS, где определяется переменная, работают во всем приложении.

Если вы импортируете файл SCSS в ваш vue.config.js, на выходе будет обычный тег <style>. Его содержимое будет сгенерировано во время компиляции / сборки и приведет к некоторому CSS (который применяется ко всему документу).
Если специально не импортирован в компонент SCSS (с помощью команды @import), компилятор не будет знатьчто означает $white.

Существует важное различие между контекстом компиляции и контекстом браузера. Компиляция происходит во время компиляции (скорее всего, в node-sass). Контекст браузера - это фактический браузер, который понимает только CSS, полученный в результате компиляции.

---

Как Vue применяет правила стиля только к родительскому элементу, а не к дочерним элементам того же класса? Это достигается с помощью области видимости.

Это означает применение настраиваемого атрибута data-v-{key} ко всем селекторам в сгенерированном теге <style> и ко всем элементам, к которым должен применяться стиль.

См. Этот пример ипроверьте его с помощью веб-консоли: https://codesandbox.io/s/vue-template-ge2hb

Он производит такую ​​разметку:

Как видите, scoped К CSS добавлен дополнительный [data-v-763db97b], добавленный к селектору, что означает, что он применяется только к элементам, имеющим этот атрибут data.

Answer 2

Большинство других ответов не учитывают, что Nuxt.js скрывает все настройки Webpack и вынуждает вас делать все через nuxt.config.js.

Я предполагаю, что Webpack не компилирует вседекларации SCSS вместе и, следовательно, не могут найти переменную.

Прошло несколько месяцев с тех пор, как у меня возникла эта проблема, поэтому все могло измениться, но здесь все идет ...

1. Makeуверен, что у вас установлены правильные пакеты Node (Nuxt НЕ по умолчанию для меня) npm i -D node-sass sass-loader
2. Добавьте ваши файлы CSS и SCSS в раздел css: [] nuxt.config.js Порядок здесь, поэтому убедитесь, чтовещи, такие как переменные, добавляются перед вещами, которые используют их, если у вас есть отдельные файлы.
3. Если вы используете макеты (я думаю, что это настройка Nuxt по умолчанию), убедитесь, что layouts/default.vue имеет блок <style lang="sass"></style> вЭто. Если я правильно помню, это может быть пустым, но должно было существовать. У меня есть только один макет, но, возможно, он должен существовать во всех них.

---

Если все это кажется слишком большой болью , есть плагин Nuxt, которыйберет большую часть работы / управления из этого процесса. Модуль ресурсов стиля Nuxt

Answer 3

Нам следует либо загрузить scss в ваш компонент

<style lang="sass">
@import 'path/to/your/_variable.scss'; // Using this should get you the variables

 .my-color {
      color: $primary-color;
 }

, либо добавить следующее к вашему vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/pathto/variables.scss";`
      }
    }
  }
};