时间戳

首页 > 解决方案 > vite：将 css/sass 导入组件中不应同时包含 style.css 中的样式

javascript - vite：将 css/sass 导入组件中不应同时包含 style.css 中的样式

问题描述

我正在使用这样的东西将 sass 文件中的样式导入到 lit 组件中：

import { html, unsafeCSS, LitElement } from "lit";
import local_css from "/src/static/component_styles.sass";

export class MyApp extends LitElement{
  static styles = unsafeCSS(local_css);
}

在构建应用程序时，样式已正确注入到 js 代码中，但 component_styles.sass 额外捆绑到了 styles.css 中。

更糟糕的是，来自 component_styles.sass 的样式被开发服务器加载为全局样式。所以本地组件的样式会影响开发中组件周围的 DOM。这违背了组件开发的目的。

有没有办法避免这种情况？在 vite 的 github 上有一个关于这个的讨论（但到目前为止还没有解决方案）

标签： javascriptsassvitelit

解决方案

感谢https://github.com/vitejs/vite/issues/3246中的 franktopel 和 tarnishablec，我得到了一个答案：在导入中添加“?inline”显然可以保持组件本地的样式。适用于开发和生产。

import local_css from "/src/static/component_styles.sass?inline";

推荐阅读