虽然我提供了一些处理css的方法，但是我有一些现有的css文件，我想在一些组件中使用，我应该怎么做?
我已经阅读了这个页面https://lit.dev/docs/components/styles/，但现在对现有的css文件很有帮助。
现代方法:仅适用于基于chromium的浏览器和safari。
使用CSS模块脚本
import styles from './my-styles.css' assert { type: 'css' };
class MyEl extends LitElement {
static styles = [styles];
}
其他解决方案:使用vite构建工具:
import style from "./style.css?inline";
class MyEl extends LitElement {
static styles = unsafeCSS(style);
}
我的建议是:不要。
- ShadyCSS多边形不支持外部样式表
- 外部样式在加载时可能会导致未样式内容的闪烁(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`
[...]
`;
这样，它们也只被加载一次。
例如，我在静态HTML文件上使用PicoCSS与Lit JS cdn
# 1标签css文件在静态index.html文件
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
</head>
# 2还有一个是Lit js元素中的app.js文件。
return html`
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>
`;
# 3接下来，从PicoCSS框架的官方站点复制所有组件。
https://picocss.com/docs/accordions.html
下面是我的例子
https://codesandbox.io/s/static-html-js-module-imports-forked-stxvuh?file=/app.js: 1376 - 1386
这不是最好的做法，但我发现它有效。