如何从npm模块导入css文件-WebComponent [英] how to import a css file from an npm module - webcomponent

问题描述

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

I'm trying to use MDC Components for material design components on my application. I have a custom element in 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导入了创建组件所需的所有类，它实际上工作得很好，但是样式不适用:

I have imported from @material/tabs all the classes needs to create the component, and it actually works perfectly fine but the styles doesn't apply:

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

In the dist folder we have the css file mdc.tabs.css that has all the css for the component. I did the test copying all the file content into the style tag and it applies all the styles correctly, but I think it should be a better way to do that... My question is how can I import the css file into my webcomponent?

推荐答案

当您render() html时，您始终可以使用传统方法:

You can always use the traditional approach when you render() your html:

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

这篇关于如何从npm模块导入css文件-WebComponent的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！