'How to compile SCSS to CSS and load the CSS code as string into a variable?

I am building a SPA with Vue (Quasar actually) in which I need to be able to:

  • Load the contents of a CSS file into a JS variable (or Vue data property) at runtime
  • This CSS file should be produced at build time from a SCSS file

I don’t want to load a pre-made CSS file, I want to be able to author the CSS code via SASS. I also don’t want to compile the CSS from SCSS at runtime, e.g. on every app load.

In other words I have the following workflow in mind:

  • Author the CSS in a pre-defined SCSS file that is part of my project structure
  • At build time (or at run-dev time) I want that this SCSS is compiled into a CSS file
  • Then at runtime, in one of my Vue components, I want to load the previously produced CSS code as string into a variable

The reasoning for that is that this CSS code will then be fed into and iframe (via postMessage-ing) and the iframe will use CSSStyleSheet’s insertRule() to apply the styles to the page.

How should I configure my project and packages so that this can happen? One thing that I found already is that I might need to use the raw-loader but how do I prepare the CSS file when building the project so that the raw-loader can get it at runtime?

javascriptcssvue.jswebpacksass


Solution 1:[1]

From an initial look you have two problems here both of which are relatively simple.

The first one is you need to include a scss compiler plugin during your projects build step. Which one you use will depend on any existing tooling you may be using. Otherwise, you can just drop in https://www.npmjs.com/package/node-sass

The second issue is how to acquire the css at runtime. You have a couple options here. You can compile the file into your bundle or you could retrieve it at runtime. Runtime would keep your bundle small and allow you to serve the css normally but this requires a server to serve it. Compile time would be faster to load initially but increase your bundle size.

If you are using webpack you could use the raw loader you linked but if you are not currently using webpack that is probably out of scope.

You could do this by adding a new step to your build that converts the css into a String literal which would alleviate the need to load it at runtime but increase your bundle side.

For loading at runtime, you could easily retrieve the file via ajax from an http server.

Solution 2:[2]

I have found the following solution:

  1. Install the "raw-loader" loader

  2. Import the SCSS using the following statement:

    import style from '!raw-loader!sass-loader!./my-styles.scss'

Note: the "!" at the beginning is to override the default loaders configuration. In my case Quasar chains the "style-loader" for SCSS files by default (to output a tag in the head) so I have to disable it in this case.

And now I have the compiled CSS code in the style variable.

Solution 3:[3]

First, run the following.

npm install path sass

Aftre that...

const path = require("path");
const sass = require("sass");

const css = sass.compile(path.join(__dirname, "style.scss")).css;
console.log(css);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Deadron
Solution 2 Dragomir Denev
Solution 3 Karl Hill

Related Questions