css - 如何动态导入样式表 Polymer 2.0

Question

我想导入带有变量的样式表:

<dom-module id="colors-palette">
    <template>
    <style>
    :host {
        --dark-gray: #263238;
        --light-gray: #e6ebed;
        --light-blue: #00bcd4;
        --autovision-blue: #174291;

        --background-box-number-applications: red;
        --color-box-number-applications: orange;
    }
    </style>
</template>
</dom-module>

我想动态地做到这一点。我的文件夹结构是:

-themes
    -theme1
        -style.html
    -theme2
        -style.html
    -theme3
        -style.html

当我的应用程序准备就绪时，我会检测主题，然后我尝试在就绪函数中像这样导入我的样式:

Polymer.importHref(this.resolveUrl('../themes/' + this.getCurrentTheme() + '/colors-palette.html'));

文件已加载，但 my-app.html 中样式中的 var 没有更改:

app-header {
    background-color: var(--dark-gray);
}

我在控制台中收到此错误:

Could not find style data in module named colors-palette

有什么想法吗？或者也许我必须这样做？

非常感谢

Answer 1

您的colors-palette.html应该只包含为html全局设置的样式。

<custom-style>
    <style is="custom-style">
        html {
            --dark-gray: #263238;
            --light-gray: #e6ebed;
            --light-blue: #00bcd4;
            --autovision-blue: #174291;

            --background-box-number-applications: red;
            --color-box-number-applications: orange;
        }
    </style>
</custom-style>