如何动态导入样式表 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>

如何动态导入样式表 Polymer 2.0

How to import stylesheet dynamically Polymer 2.0

css

import

polymer

polymer-2.x