Instructions for converting SCSS to CSS and storing the CSS code as a string in a variable

Question

Instructions for converting SCSS to CSS and storing the CSS code as a string in a variable

I am currently developing a Single Page Application (SPA) using Vue (specifically Quasar), and I have the following requirements:

Load the contents of a CSS file into a JavaScript variable or Vue data property dynamically
The CSS file should be generated from a SCSS file at build time

Instead of loading a pre-made CSS file, I want to write the CSS code using SASS. Additionally, I do not want to compile the CSS from SCSS each time the app loads.

Here is what I have in mind for the workflow:

Create the CSS in a specific SCSS file within my project structure
Compile this SCSS file into a CSS file during build time or run-dev time
Then, in one of my Vue components, load the resulting CSS code as a string into a variable at runtime

The purpose of this setup is to pass the CSS code into an iframe using postMessage and have the iframe apply the styles to the page using CSSStyleSheet's insertRule() method.

What steps should I take to configure my project and packages to achieve this? It seems like I may need to use the raw-loader, but how can I ensure that the CSS file is prepared correctly during the project build so that the raw-loader can access it at runtime?

javascript css vue.js webpack sass

Answer 1

Answer №1

Upon initial evaluation, it appears that there are two issues present here, both of which can be resolved quite easily.

The first problem is the absence of a scss compiler plugin in your project's build process. Depending on your existing toolset, you may need to choose a suitable compiler plugin. Alternatively, you can directly integrate https://www.npmjs.com/package/node-sass

The second challenge involves handling CSS at runtime. There are multiple approaches available for this task. You can either compile the CSS file into your bundle or fetch it dynamically during runtime. The latter option would keep your bundle size minimal and allow for regular CSS serving, albeit requiring a server. On the other hand, compiling at build time would result in faster initial loading but increase overall bundle size.

If you are utilizing webpack, you may consider using the raw loader as suggested; however, if webpack is not part of your current setup, this method may not be applicable.

To avoid runtime loading, you could implement an additional build step to convert the CSS into a String literal, eliminating the need for dynamic retrieval but potentially enlarging the bundle size.

For runtime loading, fetching the file via AJAX from an HTTP server is a straightforward solution.

Answer 2

Upon initial evaluation, it appears that there are two issues present here, both of which can be resolved quite easily.

The first problem is the absence of a scss compiler plugin in your project's build process. Depending on your existing toolset, you may need to choose a suitable compiler plugin. Alternatively, you can directly integrate https://www.npmjs.com/package/node-sass

The second challenge involves handling CSS at runtime. There are multiple approaches available for this task. You can either compile the CSS file into your bundle or fetch it dynamically during runtime. The latter option would keep your bundle size minimal and allow for regular CSS serving, albeit requiring a server. On the other hand, compiling at build time would result in faster initial loading but increase overall bundle size.

If you are utilizing webpack, you may consider using the raw loader as suggested; however, if webpack is not part of your current setup, this method may not be applicable.

To avoid runtime loading, you could implement an additional build step to convert the CSS into a String literal, eliminating the need for dynamic retrieval but potentially enlarging the bundle size.

For runtime loading, fetching the file via AJAX from an HTTP server is a straightforward solution.

Answer 3

Answer №2

I have come up with a solution that worked for me:

First step is to download and install the "raw-loader" loader

Next, import the SCSS file by using the code below:

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

It's important to note that the exclamation mark at the beginning of the import statement is used to override the default loaders configuration. In my situation, Quasar was automatically chaining the "style-loader" for SCSS files which I had to disable in order to get this to work.

After completing these steps, you should now have access to the compiled CSS code stored in the style variable.

Answer 4

I have come up with a solution that worked for me:

First step is to download and install the "raw-loader" loader

Next, import the SCSS file by using the code below:

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

It's important to note that the exclamation mark at the beginning of the import statement is used to override the default loaders configuration. In my situation, Quasar was automatically chaining the "style-loader" for SCSS files which I had to disable in order to get this to work.

After completing these steps, you should now have access to the compiled CSS code stored in the style variable.

Answer 5

Answer №3

To begin, execute the following command.

npm install path sass

After completing that step...

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

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

Answer 6

To begin, execute the following command.

npm install path sass

After completing that step...

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

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

Instructions for converting SCSS to CSS and storing the CSS code as a string in a variable

Answer №1

Answer №2

Answer №3

Similar questions

What methods are available for incorporating JavaScript classes from separate files into HTML while maintaining compatibility with IOS?

What is the easiest way to access my JSON data within my script?

Unleashing the power of jQuery ajax without requiring a server

The function parameter in Angular's ngModelChange behaves differently than $event

How can we generate an array of duplicated values from an array that already contains duplicates in JavaScript?

Generating and assembling text with vue.js

Creating a customized filter for a dropdown in the v-data-table component of Vuetify

Learn how to properly convert a string into a valid URL using the Next JS router when pushing pages

Leveraging an array retrieved through JQuery AJAX for auto-complete data in materializecss

Jquery bypasses original stylesheet settings when inline styles are removed

The buttons mysteriously vanish when hovered over in Internet Explorer 11

Storing and retrieving a client-side object in Javascript: A step-by-step guide

Update only one field at a time using the REST API

Eliminating single and multiple relationships - Mongoose

Activating a link click inside a table with jquery

Transform time-consuming tasks into asynchronous operations

Coordinates of HTML elements corners after rotation

Eliminate the listener if the connected function contains a binding

What is the best method to ensure a jQuery function only runs once, even when declared multiple times within a form?

Navigating using Vue Router: Automatically redirect to the homepage if the user is trying to reload a subpage