如何将CSS文件内容导入Javascript变量 [英] How to import CSS file content into a Javascript variable

问题描述

使用阴影DOM考虑一个非常简单的自定义元素:

Consider a very simply custom element using 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 标记，并将其附加到影子根中.到目前为止，一切正常.

To get the CSS into the shadow DOM, I create a style tag, which I append into the shadow root. This is all working fine so far.

现在，对于更复杂的CSS，我想将其编写在 shadow-element.css 文件中，该文件与 shadow-element.js 放在同一文件夹中.除了关注点分离外，我还希望IDE语法高亮显示-并完成CSS创作，因此我真的希望CSS位于单独的专用文件中.

Now for more complex CSS I would like to author it in a file shadow-element.css which is in the same folder as shadow-element.js. Besides seperation of concerns I also want IDE syntax highlighting and -completion for CSS authoring, so I really want the CSS in a separate, dedicated file.

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

I want to import the contents of that CSS file into a Javascript variable, like

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

在使用此项目的项目中，我们有一个有效的 webpack 堆栈，该堆栈允许导入CSS(甚至是SCSS)，但是不幸的是，导入的CSS后来成为了 bundle.css -显然根本没有用，因为该元素使用阴影DOM.

On the project where this is being used we have a working webpack stack that allows importing CSS (and even SCSS), but unfortunately that imported CSS then becomes part of bundle.css - which obviously is not at all useful, because the element uses shadow DOM.

有人对此有解决方案吗?我也愿意接受其他解决方案，只要它不需要我将CSS编写为.js文件即可.

Does anyone have a solution to this? I'm also open to alternative solutions, as long it won't require me to author my CSS in a .js file.

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

Edit: I am aware of the option of using @import './shadow-elements.css'; inside the style tag, but I would much prefer a solution that bundles the imported CSS into my Javascript bundle (as part of the component code).

推荐答案

在使用 webpack 时，可以使用

As you are using webpack, you can use raw-loader to import a text file (CSS in your case) into a string:

npm install raw-loader --save-dev

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

And you can use it inline in each file:

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变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！