如何从 npm 模块导入 css 文件 - webcomponent答案

【问题标题】：how to import a css file from an npm module - webcomponent如何从 npm 模块导入 css 文件 - webcomponent
【发布时间】：2018-05-24 21:35:18
【问题描述】：

我正在尝试将 MDC 组件用于我的应用程序中的材料设计组件。我在 Polymer (LitElement) 中有一个自定义元素：

_render(props) {
        return html`
            ${SharedStyles}
            <style>
                .js-panel {
                    display: none;
                }
                .js-panel.is-active {
                    display: block;
                }
            </style>

            <div class="mdc-toolbar">
                <div class="mdc-toolbar__row">
                    <div class="mdc-toolbar__section mdc-toolbar__section--align-start">
                        <nav id="tab1" class="mdc-tab-bar mdc-tab-bar--indicator-accent  js-tabs" role="tablist">
                            <a role="tab" aria-controls="panel-1" class="mdc-tab mdc-tab--active">Item One</a>
                            <a role="tab" aria-controls="panel-2" class="mdc-tab">Item Two</a>
                            <span class="mdc-tab-bar__indicator"></span>
                        </nav>
                    </div>
                </div>
            </div>
            <section>
                <div class="js-panels" for='tab1'>
                    <p class="js-panel is-active" role="tabpanel" aria-hidden="false">Item One</p>
                    <p class="js-panel" role="tabpanel" aria-hidden="true">Item Two</p>
                </div>
            </section>
        `
    }

我已经从 @material/tabs 导入了创建组件所需的所有类，它实际上工作得很好，但样式不适用：

在dist 文件夹中，我们有一个css 文件mdc.tabs.css，其中包含该组件的所有css。我进行了测试，将所有文件内容复制到样式标签中，它正确应用了所有样式，但我认为这应该是一种更好的方法......我的问题是如何将 css 文件导入我的 web 组件？

【问题讨论】：

我已经创建了一个组件，该组件导出一个自定义元素，其中包含复制的样式并像${SharedStyles} 一样引用它，它可以工作，但我仍然想知道是否有任何方法可以引用它，或者可能实际的组件可以在他们的自定义元素中导出它
您是否尝试过使用 Material Design 的 Web 组件而不是普通的 repo？ github.com/material-components/…
谢谢@AlanDávalos，但问题是选项卡还没有准备好在生产中使用，实际上我确实检查了它们是如何导入 css 的，它们的作用与我在第一条评论中评论的完全一样
确实是推荐的方式。此外SharedStyles 不一定是整个 lit-element，您应该能够创建一个 sharedStyles 变量：const sharedStyles = html`<style> ... </style>`，并将其包含在游览模板中：return html`${sharedStyles} ... `

标签： javascript polymer polymer-3.x lit-element

【解决方案1】：

当你render()你的html时，你总是可以使用传统的方法：

<link href="./mdc.tabs.css" rel="stylesheet">

【讨论】：