Глобальная переменная в SCSS / SASS с угловыми компонентами - PullRequest
Новая
       26

Глобальная переменная в SCSS / SASS с угловыми компонентами

0 голосов
/ 28 мая 2018

Мы разрабатываем облачное приложение в angular 5, которое будет развернуто в одном экземпляре, но адресовано нескольким заказчикам.Вопрос касается управления темами, каждый клиент хочет иметь свою тему (в основном цвета).Архитектура (упрощенная) приложения выглядит следующим образом: 

--src
    --app
    app.component.html
    app.component.scss
    app.component.ts
        -- component1
        comp1.component.html
        comp1.component.scss
        comp1.component.ts
    ...

--scss
    -- current 
        style.scss
        _variables.scsc
    -- customer1
        style.scss
        _variables.scss
    -- customer2
        style.scss
        _variables.scss
    ...

В настоящее время мы выполняем развертывание клиентом, поэтому проблем нет, мы копируем / вставляем стиль в текущий перед сборкой.

Каждый component.scss импортирует _variables.scss для использования переменных.

Нам бы хотелось, чтобы при входе пользователя в приложение мы определяли клиента и выбирали правильный стиль, но при этом CSSгенерируется во время компиляции.

Есть ли способ определения глобальных переменных, которые могут быть изменены во время выполнения и которые влияют на подкомпоненты?

Решения, которые я тестировал:

  • Установите в angular-cli scss для каждого клиента, создайте и выполните сценарий js, чтобы изменить ссылку html на css "href = 'assets / {customer} .bundle.css'".Это работает для глобальных стилей, но переменные в подкомпонентах не обновляются.

  • Используйте чистый CSS для объявления переменных области видимости: root {--color-primary: grey;} и использовать их во вложенных компонентах .test {color: var (- color-primary)}.Создайте JS-скрипт, который обновит все глобальные переменные в соответствии с клиентом.Это работает, но нет эквивалента в SCSS?странно

Не знаю, дал ли я достаточно подробностей, спасибо за помощь.

Ответы [ 3 ]

0 голосов
/ 28 мая 2018

Нет способа передать любые переменные из ts в scss.

Все, что вам нужно, это темы.Таким образом, для каждого клиента вам необходим глобальный класс телосложения с собственным набором переменных / классов.

Ознакомьтесь с документами по тематике угловых материалов, например https://material.angular.io/guide/theming#defining-a-custom-theme

0 голосов
/ 24 ноября 2018

Поскольку нет правильного способа сделать это;И решение, используемое угловой тематикой, не было удовлетворительным для нас;мы решили использовать пользовательский конструктор веб-пакетов , который будет компилировать наш стиль на основе предоставленных нами записей.Обратите внимание, что мы не используем SCSS в угловых компонентах явно. 

"use strict";

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const AutoPrefixer = require("autoprefixer");

module.exports = {
  entry: {
    "modern_style.application": "./src/styles/modern_style.scss",
    "default.application": "./src/styles/default.scss"
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].bundle.css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              ident: "postcss",
              plugins: [AutoPrefixer()],
              sourceMap: true
            }
          },
          {
            loader: "resolve-url-loader"
          },
          {
            loader: "sass-loader",
            options: {
              precision: 8,
              includePaths: [],
              sourceMap: true
            }
          }
        ]
      }
    ]
  }
};

Эти файлы записей будут иметь свои переменные и настройки, примененные в каждом соответствующем файле записей, который выглядит следующим образом: 

// Entry file: modern_style.scss
$someVariableToBeUsedOrOverwritten: red;

@import "common/allModulesAreImportedHere"

.customRule{
   //...
}

Этот сгенерированный стиль, например, default.bundle.css, затем загружается через <link rel="stylesheet" type="text/css" [href]="linkToTheme">

0 голосов
/ 28 мая 2018

Mixins решит вашу проблему.

В определенных клиентских scss-файлах у вас будет определенное определение.В component.scss вы будете использовать миксин, специфичный для клиента, и он решит вашу проблему как во время компиляции, так и во время выполнения.

...