如何将 CSS 文件内容导入到 Javascript 变量中

考虑一个使用 Shadow DOM 的非常简单的自定义元素：

customElements.define('shadow-element', class ShadowElement extends HTMLElement {
  constructor() {
    super();
    this.styleTag = document.createElement('style');
    this.styleTag.textContent= `
.root::before { 
  content: "root here!"; 
  color: green; 
}
    `
    this.shadow = this.attachShadow({mode: 'closed'});
    this.root = null;
  }
  
  connectedCallback() {
    this.root = document.createElement('div');
    this.root.className = 'root';
    this.shadow.append(this.root, this.styleTag);
  }
})

<shadow-element></shadow-element>

为了将 CSS 放入影子 DOM 中，我创建了一个style标签，我将其附加到影子根中。到目前为止，这一切都运行良好。

现在，对于更复杂的 CSS，我想将其编写在一个文件中shadow-element.css与以下内容位于同一文件夹中shadow-element.js。除了关注点分离我还想要 IDE 语法突出显示和 CSS 完成功能，因此我真的希望将 CSS 放在一个单独的专用文件中。

我想将该 CSS 文件的内容导入到 Javascript 变量中，例如

import styles from './shadow-element.css'; // obviously doesn't work

在使用它的项目中，我们有一个工作webpack允许导入CSS（甚至SCSS）的堆栈，但不幸的是导入的CSS随后成为bundle.css- 这显然根本没有用，因为该元素使用shadow DOM。

有人有解决办法吗？我也愿意接受替代解决方案，只要它不需要我在 .js 文件中编写 CSS 即可。

Edit：我知道使用的选项@import './shadow-elements.css';在 - 的里面style标签，但我更喜欢将导入的 CSS 捆绑到我的 Javascript 包中（作为组件代码的一部分）的解决方案。

当你正在使用webpack， 您可以使用原始装载机 https://github.com/webpack-contrib/raw-loader将文本文件（在您的情况下为 CSS）导入到字符串中：

npm install raw-loader --save-dev

您可以在每个文件中内联使用它：

import css from 'raw-loader!./shadow-element.css';

customElements.define('shadow-element', class ShadowElement extends HTMLElement {
  constructor() {
    super();
    this.styleTag = document.createElement('style');
    this.styleTag.innerText = css;
    this.shadow = this.attachShadow({mode: 'closed'});
    this.root = null;
  }

  connectedCallback() {
    this.root = document.createElement('div');
    this.root.className = 'root';
    this.shadow.append(this.root, this.styleTag);
  }
})