Глобальные переменные SASS не передаются в частичные

В принципе у меня есть структура, которая отлично работала в 3.0.x, и теперь она ломается с ошибками undefined variable.

  • обертоны
    • _base.css.sass
    • _header.css.sass
  • main.css.sass
  • application.css.sass

the application.css.sass:

//=require 'main'

the main.css.sass:

@import 'partials/base'
@import 'partials/header'

Довольно простой материал.

Я получаю сообщение об ошибке _header.css.sass потому что он использует переменную, определенную на _base.css.sass

У меня не было этой ошибки раньше, и мне это не имеет смысла, поскольку мы импортируем эти переменные в _base.css.sass в том же контексте, что мы импортируем _header.css.sass.

Мне придется импортировать _base.css.sass на все частичные тоже? Какова точка main.css.sass, требующая глобальных переменных, если они не могут использоваться в ваших собственных частицах, которые вам требуются?

Если моя структура полностью ошибается, пожалуйста, дайте мне альтернативу, я бы хотел предложить предложения.

ОТВЕТЫ

Ответ 1

Вы не можете использовать //=require для включения "динамического" материала SASS, такого как mixins и variables, потому что он используется для включения самого "статического" материала (например, чистого CSS). Вы должны @import все свои файлы в application.css.sass. Railscasts дает хорошее объяснение этому в episode # 268.

Ответ 2

Существует простое решение для исходной темы. Ваши приложения и основные файлы css должны быть scss файлами. Это означает, что вы можете использовать известный синтаксис:

/*
 *= require_self
 *= require main
 */

В main.scss вы можете импортировать частичные файлы следующим образом:

@import 'partials/base'
@import 'partials/header'

Эти файлы являются sass файлами, и вы можете воспользоваться величием SASS; -)

Ответ 3

Я думаю, что у меня была такая же проблема, и что помогло объявить переменные перед @imports. Надеюсь, это поможет кому-то =).

Ответ 4

По-видимому, вы должны использовать application.css.sass как манифест или ничего не получится.

В принципе вы можете отделить все, но их нужно вызывать из файла приложения, потому что области не разделены.

Немного слишком сильное, если вы спросите меня...

Ответ 5

Это файл sass. Используйте @import в application.css.sass вместо require. require предназначен для простых движков css или шаблонов, у которых нет системы импорта.