import a SCSS file as a CSS string using Parcel, SASS and TypeScript

Question

Is there a way to import SCSS as CSS using Parcel Bundler + SASS + TypeScript?

I have a SCSS file called file.scss

div {
    span: {
        background: red
    }
}

so I want to import it as a CSS string in TypeScript, I'm tryng something like this:

import cssString from "./file.scss"

console.log(cssString)
         // ^^^^^^^^^ Expected value => div span: { background: red }

But isn't working properly.

So, i need to know, there is a way to do that?

user_11249191 · Answer

Just invoke this method readFileSync directly

If you can't import fs in typescript, you can follow this question

import fs from 'fs';

const cssStr = fs.readFileSync('./file.scss', { encoding: 'utf8' });
console.log(cssStr.replace(/\s+/g, ''));

user_4738367 · Answer

I asked the same question, in "discussions" in the Parcel github and Niklas Mischkulnig answered me, he told me that this can be done with Parcel 2, like this:

import cssString from "bundle-text:./file.scss;"

follow the link to the question I made in the discussion forum of the parcel github

import a SCSS file as a CSS string using Parcel, SASS and TypeScript

2 Answers