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?

Answer 1

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, ''));

Answer 2

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