如何将 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.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 的一部分 - 这显然根本没有用，因为该元素使用阴影 DOM.

有人对此有解决方案吗？我也愿意接受其他解决方案，只要它不需要我在 .js 文件中创作我的 CSS。

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

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);
  }
})

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

How to import CSS file content into a Javascript variable

css

webpack

es6-modules

shadow-dom

custom-element