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

Question

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

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

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 требующих глобальных переменных, если они не могут быть использованы в собственных требуемых частях?

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

Answer 1

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

Answer 2

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

Answer 3

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

/*
 *= require_self
 *= require main
 */

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

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

Эти файлы - sass, и вы можете извлечь выгоду из величия SASS; -)

Answer 4

Очевидно, что вы ДОЛЖНЫ использовать application.css.sass в качестве манифеста, иначе ничего не получится.

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

Слишком убедительно, если вы спросите меня ...

Answer 5

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