Есть ли способ получить цвета, хранящиеся в бэк-энде, и поместить их в файл S CSS - PullRequest
Новая
       5

Есть ли способ получить цвета, хранящиеся в бэк-энде, и поместить их в файл S CSS

0 голосов
/ 07 января 2020

В данный момент я перефакторинг своего кода. Так что это означает больше ясности и более высокое обслуживание. У меня есть идея в голове, но, к сожалению, я не знаю, как это можно выпустить. Чтобы быть более чистым и эффективным, я хочу создать изолированный _colors.scss файл, который будет содержать все мои цвета для приложения. Другими словами, я хочу, чтобы это выглядело примерно так $colorPrimary: branding.colorPrimary, $colorSecondary: branding.colorSecondary ... На данный момент это довольно грязно, потому что цветовая стилизация поддерживается на уровне компонентов, но я хочу сделать это отдельно. Пример: 

<button style={
   color: branding.colorPrimary,
   background: branding.colorSecondary>
Hello
</button>

Цвета хранятся на стороне BE, поэтому, если я хочу реагировать на них, я должен сделать звонок. Я буду рад, если кто-то может помочь мне с этим умом ****. Спасибо .

1 Ответ

1 голос
/ 07 января 2020

для достижения этого поведения у вас есть два основных способа сделать это. первое описание не совместимо с Inte rnet Explorer.

В последней версии CSS, описанной в W3 C, мы можем иметь переменную непосредственно в CSS.

Как этот бэкэнд может сделать что-то вроде этого: 

<head>
    <style type="text/css">
        :root {
          --primary-color: #cecece;
          --secondary-color: #fefefe;
        }
    </style>
</head>

тогда на вашем s css (или css) вы можете сделать что-то вроде: 

.mySelector {
   color: var(--primary-color, black);
}

, который в основном будет интерпретироваться как: 

.mySelector {
    color: #cecece;
}

Или запасной цвет black, если --primary-color не определен.

Как вы можете себе представить, для бэкэнда очень просто подготовить конфигурацию для внешнего интерфейса. А со своей стороны (в качестве внешнего интерфейса) вы можете просто использовать то, что уже доступно в CSS инструментах API.

Но если вы ищете что-то, совместимое с IE. Возможно, вам нужна более сложная инфраструктура.

Цель состоит в том, чтобы при каждой смене цвета пользователя вызывать компиляцию sass для веб-пакетов, чтобы создать вывод css с соответствующей переменной конфигурацией.

для этого вам понадобится загрузчик ресурсов SaSS , который автоматически внедрит файл sass во все остальные файлы. Это похоже на автоматическое добавление @import "_colors".

, тогда бэкэнд-сервер должен будет:

  1. Записать куда-нибудь _color.s css файл (скажем, /user/123/_color.s css)
  2. Запросить компиляцию, например webpack client 123
  3. прочитать выходную папку веб-пакета для клиента 123 и определить, существует ли указанный c CSS существует
  4. Вставить в ваша голова HTML.

Для настройки веб-пакета

в вашем веб-пакете у вас будет что-то вроде: 

   const argv = require("yargs").argv;
    entry: {
        [...]
    },
    output: {
      // Take the argument as clientId and craft dedicated output folder.
      path: helpers.root(`public/themes/front/${argv.client}`), 
      filename: "[name].[contenthash].js",
      chunkFilename: "[name].[contenthash].js"
    }

Как эта база на Идентификатор клиента, в котором вы сохраните исходную CSS в указанной папке c.

Наконец, правила SaSS будут выглядеть так: 

 {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader',
        'sass-loader',
        {
          loader: 'sass-resources-loader',
          options: {
            resources: (argv.client) ? `/user/${ argv.client }/_color.scss` : `/user/default/_color.scss`,
          },
        },
      ],
    }
...