SCSS / SASS中具有角度分量的全局變量

Question

我們正在開發角度為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 a scss，構建並執行腳本js以修改指向css“ href ='assets / {customer} .bundle.css'”的html鏈接。 它適用於全局樣式，但是子組件中的變量不會更新。

• 使用純CSS聲明范圍變量：root {--color-primary：grey; }，並在子組件.test {color：var（-color-primary）}中加以利用。 制作一個JS腳本，該腳本將根據客戶端更新所有全局變量。 它有效，但是在SCSS中沒有等效功能嗎？ 奇怪

我不知道是否提供了足夠的細節，謝謝您的幫助。

Answer 1

無法將任何變量從ts傳遞到scss。

您所需要的只是主題。 因此，對於每個客戶，您都需要一個全局主體類，並帶有自己的一組變量/類。

查看角度材料主題文檔，例如https://material.angular.io/guide/theming#defining-a-custom-theme

Answer 2

Mixins將解決您的問題。

在特定的客戶scss文件中，您將保留特定的定義。 在component.scss中，您將使用特定於客戶的mixin，它將解決編譯和運行時的問題。

Answer 3

由於沒有適當的方法來執行此操作； Angular主題使用的解決方案對我們來說並不令人滿意； 我們決定使用自定義Webpack構建器 ，該構建器將根據我們提供的條目來編譯我們的樣式。 請注意，我們沒有在角度組件中明確使用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{
   //...
}

然后，通過<link rel="stylesheet" type="text/css" [href]="linkToTheme">加載此生成的樣式，例如default.bundle.css