Блог

Я настроил свой проект на использование Bootstrap и scss с помощью Webpacker, однако всякий раз, когда я запускаю свой сервер локально, я получаю эту ошибку:

 ActionView::Template::Error (Error: Undefined variable: "$secondary-accent".
        on line 76:23 of app/assets/stylesheets/_hero.scss
>>   border: solid 0.5px $secondary-accent;
 

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

В моей /app/javascscript/ папке у меня есть src/style.scss файл, который импортирует необходимые таблицы стилей.

 @import '../../assets/stylesheets/_globals.scss'; //import globals first so the values propagate to Bootstrap
@import '~bootstrap/scss/bootstrap'; //import bootstrap
@import '../../assets/stylesheets/application.scss' //import everything else;
 

/assets/stylesheets/application.scss выглядит так:

 @import '_navbar';
@import 'actiontext';
@import '_hero';
@import 'comments';
@import 'static_pages';

body {
  font-family: $body-font;
  font-size: $standard;
}
 

Конечно, самый простой способ избавиться от этого — просто добавить @import 'globals' к каждому из частичных элементов, но это, похоже, не соответствует способу sass. Я действительно не хочу добавлять @import 'globals' в начало каждого отдельного .scss файла, на данный момент это не имеет большого значения, но по мере роста проекта и увеличения сложности стилей удобство обслуживания может стать головной болью. Я думал, что Webpacker позаботится об этом, я не прав? Я что-то упустил в настройке?

Ps. Я понимаю, что этот вопрос задавался десятки раз, но все они, похоже, относятся к более старым версиям Rails, или решения неприменимы ко мне (например, удаление дерева require из application.css

Это было решено путем небольшого ужесточения настройки моего веб-пакера.

Самой большой проблемой была установка scss , которую я считал sass-rails достаточной в моем gemfile, но мне также было нужно yarn add scss . Мне не нужно было импортировать глобальные переменные внутри src/style.scss just in application.scss .