时间戳

首页 > 解决方案 > 如何将 CSS 文件内容导入 Javascript 变量

css - 如何将 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 进入 shadow DOM，我创建了一个style标签，并将其附加到 shadow root 中。到目前为止，这一切都很好。

现在，对于更复杂的 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。

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

标签： csswebpackes6-modulesshadow-domcustom-element

解决方案

当您使用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);
  }
})

推荐阅读