首页 文章

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

提问于
浏览
0

我们正在开发一个角度为5的 Cloud 应用程序,该应用程序将部署在单个实例中,但将针对多个客户 . 问题涉及主题的管理,每个客户都想拥有自己的主题(主要是颜色) . 应用程序的体系结构(简化)如下所示:

--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 / .bundle.css'” . 它适用于全局样式,但子组件中的变量不会更新 .

  • 使用纯css声明范围变量:root {--color-primary:grey;并在子组件中利用它们.test {color:var( - color-primary)} . 制作一个JS脚本,根据客户端更新所有全局变量 . 它有效,但在SCSS中没有相应的东西?奇怪

我不知道我是否提供了足够的细节,谢谢你的帮助 .

3 回答

  • 0

    没有办法将任何变量从ts传递给scss .

    所有你需要的是主题 . 因此,对于每个客户,您需要一个全局体类,其中包含自己的一组变量/类 .

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

  • 1

    Mixins将解决您的问题 .

    在特定的客户scss文件中,您将保留特定的定义 . 在component.scss中,您将使用mixin,它是特定于客户的,它将在编译和运行时解决您的问题 .

  • 0

    因为没有正确的方法来做到这一点; Angular主题使用的解决方案对我们来说并不令人满意;我们决定使用custom webpack builder来根据我们提供的条目编译我们的样式 . 请注意,我们没有明确地在角度组件中使用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

相关问题