Как импортировать темы начальной загрузки в реагирующий на загрузку? - PullRequest
Новая
       42

Как импортировать темы начальной загрузки в реагирующий на загрузку?

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

Я создал базовое приложение React, используя CRA и response-bootstrap.Я хотел бы загрузить различные bootswatch темы.Все темы загружаются и помещаются в папку src/themes.Каждая тема имеет свою собственную папку с фиксированным набором имен файлов: 

src/themes/

  superhero/
  _bootswatch.scss
  _variables.scss
  bootstrap.css
  bootstrap.min.css

  /cerulean
  _bootswatch.scss
  _variables.scss
  bootstrap.css
  bootstrap.min.css

  and so on...

Теперь предположим, что я хочу загрузить тему супергероя.Это можно сделать разными способами, которые я покажу ниже:

  1. Я переименовал index.css CRA в index.scss и добавил следующие строки в начало файла (у меня есть узел-sass установлен):

    @import "./themes/superhero/variables"; @import "~bootstrap/scss/bootstrap"; @import "./themes/superhero/bootswatch";

  2. Я добавляю следующую строку в index.js:

    import './themes/superhero/bootstrap.min.css'

Оба эти метода работают нормально независимо.Я хочу импортировать их в index.js следующим образом:

import './themes/superhero/_variables.scss' import 'bootstrap/scss/bootstrap.scss'; import './themes/superhero/_bootswatch.scss'

Когда я делаю это, первые две строки импортируются правильно, но я получаю неопределенные ошибки переменных, когдаэто касается третьего импорта, _bootswatch.scss.Это потому, что первые два файла независимы.Я думаю, что в третьем файле есть зависимые переменные, но при каждом импорте они по-разному ограничены и, следовательно, последний импорт не имеет доступа к переменным.Это не относится к методу 1, все они импортируются в один файл, а затем node-sass заботится о них.

Есть идеи, как решить проблему?

1 Ответ

0 голосов
/ 24 марта 2019

Насколько я знаю, вы должны выбрать первый , если хотите использовать scss-версии тем bootswatch для переопределения некоторых переменных или того, что вы хотите с ними делать.Файлы scss будут предварительно обработаны и преобразованы в один файл css.Поэтому, когда вы импортируете файл scss в файл js, файл scss будет конвертирован в обычный файл css, который будет импортирован в ваш файл js в конце всего процесса.Поэтому scss-файл переменных будет одним css файлом, который нельзя увидеть из другого файла.Вот почему вы должны импортировать переменные в файл scss, чтобы быть доступными во время сборки.(Кроме того, _ показывает в именах файлов, что эти файлы являются частичными).

Я также часто использую темы начальной загрузки, и я всегда использую их, как вы описали в первом варианте, импортируйте все из нихвнутри моего собственного index.scss файла или чего-то еще, и этот файл может быть импортирован в любой файл js: 

// here goes my personal variables
@import "./themes/[theme_name]/variables";
@import "~bootstrap/scss/bootstrap";
@import "./themes/[theme_name]/bootswatch";

Проверьте официальный сайт sass Guide, раздел предварительной обработки: https://sass -lang.com / гид

...