import a css file into a javascript to convert it to a string

Question

i am not sure if is possible to do in plain js

i am trying to add some styles to a style tag loading from a css file,

My problem is, i don't know how to read the file to transform in a string

I can't find a solution to do something like

import baseStyle from "./css/style.css"
//or
const baseStyle require("./css/style.css")

so the idea is parse in the html

        
const cssStyle = document.createElement("style");
        
cssStyle.innerHTML = baseStyle;

const doc = iframe.contentDocument;
doc.head.appendChild(cssStyle)

I am using GrapesJs, i am trying to parse some css from a framework

Thanks for the help

I try to load the css from several ways but nothing works

Axekan · Accepted Answer · 2022-11-02 17:57:07Z

2

You could try using fetch to get the file as text.

Something like this:

async function setCss() {
    const baseStyle = await fetch("./css/style.css").then(res => res.text())
    
    const cssStyle = document.createElement("style");
    
    cssStyle.innerHTML = baseStyle;

    const doc = iframe.contentDocument;
    doc.head.appendChild(cssStyle)
}

answered Nov 2, 2022 at 17:57

Axekan

7295 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MikeManzanas Over a year ago

works perfect, gracias

Collectives™ on Stack Overflow

import a css file into a javascript to convert it to a string

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related