Question

如何为Polymer声明全局或文档级样式模块？ Polymer的App Toolbox入门套件将文档样式内嵌在index.html文件中：

<style>
  body {
    margin: 0;
    font-family: 'Roboto', 'Noto', sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    background-color: #eeeeee;
  }
</style>

但是，我想把它分成一个模块。

starter-kit模板还包含一个shared-styles.html模块，可以导入每个模块以使其生效，但这种方法意味着在每个模块中重复import指令。

Answer 1

＆gt; = 1.7

见：https://www.polymer-project.org/1.0/blog/2016-10-03-1.7-release（感谢Tony19）

要进行上下文关联，以下模块包含文档级样式：

<link rel="import" href="../../bower_components/polymer/polymer.html">

<style is="custom-style">

    /* Declare document level styling, variables and mixins here */
    html {
        margin: 0;
        font-family: 'Roboto', 'Noto', sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        background-color: #eeeeee;

        --example-css-var: 1rem;

        --example-css-mixin: {
            width: 100%;
        };
    }

</style>

然后，此模块将包含在所需页面/应用程序入口点的head标记内。即：

<link rel="import" href="/src/styles/document-styles.html">

请注意，全局样式（即通过其API“刺穿”Web组件的样式）需要采用CSS变量或mixin的形式，并且将放在html中。

＆LT; 1.7

请参阅：https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style

要进行上下文关联，以下模块包含文档级样式：

<link rel="import" href="../../bower_components/polymer/polymer.html">

<style is="custom-style">

    /* Declare document level styling */
    body {
        margin: 0;
        font-family: 'Roboto', 'Noto', sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        background-color: #eeeeee;
    }

    /* Declare document level variables and mixins here */
    :root {
        --example-css-var: 1rem;

        --example-css-mixin: {
            width: 100%;
        };
    }

</style>

然后，此模块将包含在所需页面/应用程序入口点的head标记内。即：

<link rel="import" href="/src/styles/document-styles.html">

请注意，全局样式（即通过其API“刺穿”Web组件的样式）需要采用CSS变量或mixin的形式，并且将放在:root中。

聚合物：全局/文档级样式模块

1 个答案:

＆gt; = 1.7

＆LT; 1.7