Search code examples
webpackvue-clicss-loader

Importing CSS file as string to use inside <head> of an iframe

I’m trying to programatically add a stylesheet to the head section of an iframe in my Vue component.

However, when I use the import statement to reference my stylesheet, it becomes part of the compiled bundle. (Due to webpack settings) I can’t reference it as a variable in my code, so I can’t append it to the iframe.

I want to modify the vue.config.js so that it tests for a single filename and allows me to import that file as a plain string in my code.

I’ve tried experimenting with adding a new loader to vue.config.js, but I can't really get it working.

I import the CSS file and it returns {}, but I expect it to return a plain string.

Solution

  • I later found that Webpack provides raw-loader, which allowed me to simply import a file as a raw text file by prepending the file path with '!!raw-loader!'.

    Like this: import normalize from "!!raw-loader!@/assets/normalize.css"