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

Question

Я создал базовое приложение React с использованием CRA и response-bootstrap. Я хотел бы загрузить различные темы начальной загрузки. Все темы загружаются и размещаются внутри 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 и добавил следующие строки в начало файла (у меня установлен node-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 заботится о них.

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

Answer 1

Насколько я знаю, вы должны выбрать первый, если вы хотите использовать 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/guide