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

我在my-app准备就绪时检测到主题，之后我尝试在ready函数中导入我的样式：

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

文件已加载，但my-app.html中样式的var不会更改：

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

我在控制台中遇到了这个错误：

无法在名为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

1 个答案: