Условное применение стиля css в приложении React Spa
У меня есть проект, в котором я пытаюсь применить разные стили CSS для разных макетов (которые я определяю по URL-адресу, в основном у нас есть два разных доменных имени). В файле webpack.config я исключил таблицу стилей, используемую для 2-го макета, поскольку он загружал весь CSS и помещал все это в один файл во время сборки (что переопределяет цвет тела, установленный для макета 1 с макетом 2). Но после исключения этого конкретного файла CSS таблица стилей не добавлялась при просмотре 2-го веб-сайта. Это приложение для реагирования, и я использую условие if для применения стиля:
index.js файл:
if (window.location.hostname.includes("website2")) {
require("./assets/css/style1.css");
require("./assets/css/style2.css");
} else {
require("./assets/css/style1.css");
}
webpack.config
module: {
test: /\.css$/,
exclude: /\style2.css$/,
....
}
Я новичок в webpack, поэтому не уверен, следует ли исключать файл CSS таким образом.
Ответы 1
Webpack - это инструменты для разработки / сборки. Он компилирует только исходные файлы. Таким образом, ваш код не будет работать во время выполнения.
Вы должны установить корневой класс css как пространство имен / тему в каждом файле css, а затем просто изменить имя класса в теге body.
// note: scss styles
.style1 {
// style theme 1
}
.style2 {
// style theme 2
}
if (window.location.hostname.includes("website2")) {
body.classList.add("style1");
body.classList.add("style2");
}
else{
body.classList.add("style1");
}
Запускается ли веб-пакет до развертывания или после? Это происходит статически. Итак, если вы запустите сборку веб-пакета перед развертыванием в двух доменах, это условие будет недействительным. Что касается имени хоста, я бы предпочел, чтобы вы проверили это: Доступ к имени хоста URL из React JS.