css - SCSS / SASS 中的全局变量，带有角度分量

问题描述

我们正在 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: gray; 并在子组件 .test {color: var (- color-primary)} 中利用它们。制作一个 JS 脚本，它将根据客户端更新所有全局变量。它有效，但在 SCSS 中没有等效项？奇怪的

我不知道我是否提供了足够的详细信息，谢谢您的帮助。

标签： cssangularvariablessassthemes

因为没有适当的方法来做到这一点；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{
   //...
}

这个生成的样式，例如default.bundle.css然后通过<link rel="stylesheet" type="text/css" [href]="linkToTheme">

css - SCSS / SASS 中的全局变量，带有角度分量

问题描述

解决方案

推荐阅读