如何从npm模块导入CSS文件至Web Component

嘿，我刚好碰到过类似的场景，给你几个实用的方法来直接把MDC的CSS文件导入到你的Web Component里：

方法1：用unsafeCSS注入CSS字符串 #

LitElement（现在的Lit框架）支持把外部CSS文件作为字符串导入，再通过unsafeCSS把它注入到组件样式中，这是最直接的实现方式：

1. 先确保你已经装了@material/tabs，然后从lit-element（或最新版的lit）导入unsafeCSS：

import { LitElement, html, unsafeCSS } from 'lit-element';
import tabsStyles from '@material/tabs/dist/mdc.tabs.css';
// 导入你的共享样式
import SharedStyles from './path/to/shared-styles.js';

2. 在_render方法的<style>标签里，把导入的MDC样式放在自定义样式前面（这样你的自定义样式能按需覆盖MDC默认样式）：

_render(props) {
  return html`
    ${SharedStyles}
    <style>
      ${unsafeCSS(tabsStyles)}
      .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>
  `;
}

为什么要用unsafeCSS？ #

Lit默认会对模板内容做HTML转义来防范XSS风险，而导入的CSS是纯字符串，unsafeCSS就是告诉Lit：“这个内容是可信的CSS，直接渲染就好”。

方法2：通过构建工具处理CSS导入（Webpack/Rollup） #

如果你用Webpack或Rollup这类构建工具，得先配置好CSS处理插件：

• Webpack：用css-loader，它会把CSS文件转成字符串模块供你导入；
• Rollup：可以用rollup-plugin-styles或rollup-plugin-css-only来处理CSS导入。

配置完成后，直接用方法1的代码就能正常导入CSS了，不需要额外操作。

额外提醒 #

• 因为Web Component的Shadow DOM样式隔离特性，导入的MDC CSS只会作用在你的组件内部，不会污染全局样式，这正是我们需要的效果；
• 如果需要MDC的全局基础样式（比如字体、排版），可以在应用入口文件单独导入@material/base/dist/mdc.base.css这类全局样式文件。

内容的提问来源于stack exchange，提问作者Jose Raul Perera