lit - 如何使用 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`
[...]
`;

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