如何使用 lit 加载外部 css 文件

Question

虽然 lit 提供了一些处理 css 的方法，但是我有一些现有的 css 文件我想在某些组件中使用，我该怎么办？

我已阅读此页面 https://lit.dev/docs/components/styles/，但现在对现有的 css 文件很有帮助。

Answer 1

我的建议是：不要。

• ShadyCSS polyfill 不支持外部样式表。
• 外部样式在加载时可能会导致无样式内容 (FOUC) 闪烁。
• href 属性中的 URL 是相对于主文档的。如果您正在构建一个应用并且您的资产 URL 是众所周知的，这是可以的，但在构建可重用元素时避免使用外部样式表。

外部 css 文件只能加载到您的 html 文件中（最有可能是 index.html）。

css 应该与您的元素捆绑在一起。 可重用性的替代方法是导出共享样式并将它们导入样式属性中，如下所示：

static styles: CSSResult[] = [
    // language=CSS
    AnimatedStyles,
    ShadowStyles,
    css`
[...]`;

并从共享文件导入。

export const ShadowStyles = css`
[...]
`;
export const AnimatedStyles = css`
[...]
`;

这样，它们也只加载一次。