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?

score 0 · Answer 1 · answered May 22 '21 at 09:32

0

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

answered May 22 '21 at 09:32

zixiCat

1,019
1
5
17

I think I did not express myself well, I would like to have the CSS analyzed. In my initial question, I realized that I was wrong in the part where I talk about the result I expected, I already changed the question. basically, what I need is to import the SCSS in a string in CSS format. would you know to say if this is possible? – Daniel de Andrade Varela May 22 '21 at 19:06

score 0 · Accepted Answer · answered May 23 '21 at 20:16

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 Answers2