Доступ к цветовым переменным в каждом компоненте - PullRequest
Новая
       14

Доступ к цветовым переменным в каждом компоненте

0 голосов
/ 02 января 2019

Я ищу трюк, чтобы облегчить мою жизнь.Я хочу стилизовать каждый компонент в моем приложении nuxtjs с похожей цветовой палитрой, но мне нужно ввести цветовую палитру в каждом компоненте.Пытался использовать scss в первый раз.Как разместить переменные более глобально и как их достичь?

Я пытался поместить код в assets / scss / styles.scss, но компоненты ничего не знают об удаленном scss.

$ color1: # 808060;

$ color2: # 3D3D34;

$ color3: # 151510;

$ color4: # 090906;

1 Ответ

0 голосов
/ 02 января 2019

Как упомянуто @ jayce444 , этот поток предоставит вам несколько вариантов решения задачи.

Однако вам необходимо подумать, прежде чем использовать этот подход.Как правило, вы должны импортировать файл переменных в каждый компонент SCSS: 

<style lang="scss">
    @import "<PATH_TO_ROOT>/assets/scss/styles.scss";

    .someclass { color: $some-variable; }
</style>

Таким образом вы защитите себя от многих неопределенных будущих возможностей.Вот некоторые из них:

  • Разделение репозитория на несколько микро-интерфейсов
  • Перемещение в Lerna, как в режиме моно репо
  • Повторное использование компонента в другом кодебазис

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

Альтернативно, другое чистое решение не использует vue-loader для управления SCSS.Это означает, что вы не должны использовать тег style внутри .vue файлов.

Создать один мастер style.scss файл.Для каждого компонента создайте выделенный .scss файл.И импортируйте все эти файлы в мастер style.scss, например: 

// External third party scss from node_modules
@import '~@material/button/button`;

// Base color style sheet (SCSS variable are global)
// By importing it here, all the subsequent .scss file have access to variables
@import './styles/colors`;

@import './components/component-1`;
@import './components/component-2`;

// .... Add remaining component
@import './components/component-n`;

. Есть несколько преимуществ.Ваша таблица стилей больше не привязана к конкретной абстракции фреймворка.Вы можете легко использовать свой стиль с другими базами кода, созданными поверх других фреймворков.Конечно, если вам нужно иметь Scoped-CSS , которые .vue файлы предоставляют из коробки, попробуйте использовать нотацию БЭМ.

Наконец, если вы решите импортировать переменные .scss файл в каждом компоненте, затем вы можете использовать node-sass и webpack псевдонимы , чтобы сократить путь импорта.

...