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

Question

考虑一个非常简单的使用影子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.js在同一文件夹中的名为shadow-element.css的文件中编写它。除了关注点分离之外，我还想要获得适用于CSS编写的IDE语法高亮和自动完成功能，所以我真的想要将CSS放在单独的、专用的文件中。

我想要导入该CSS文件的内容到一个Javascript变量中，例如：

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

在这个项目中，我们使用了一个可工作的webpack堆栈，允许导入CSS（甚至是SCSS），但不幸的是，导入的CSS成为bundle.css的一部分--这显然毫无用处，因为该元素使用影子DOM。

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

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

- connexo

---

Web组件样式的完整文章[smashingmagazine]（https://www.smashingmagazine.com/2016/12/styling-web-components-using-a-shared-style-sheet/） - Grzegorz T.

“但不幸的是，导入的CSS随后成为bundle.css的一部分 - 这显然毫无用处，因为该元素使用阴影DOM” - 然后不要创建一个style元素来附加到您的自定义元素，而是创建一个link，并将其href设置为bundle.css的URL…？ - misorude

Answer 1

如果您正在使用 webpack，则可以使用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);
  }
})

- Ander