使用Parcel、SASS和TypeScript将SCSS文件导入为CSS字符串

Question

有没有一种使用Parcel Bundler + SASS + TypeScript导入SCSS文件并将其作为CSS文件的方法？

我有一个名为file.scss的SCSS文件。

div {
    span: {
        background: red
    }
}

我想将其作为CSS字符串导入到TypeScript中，我正在尝试如下：

import cssString from "./file.scss"

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

但是它不能正常工作。

所以，我需要知道是否有办法做到这一点？

- Daniel de Andrade Varela

Answer 1

直接调用此方法 readFileSync

如果在 TypeScript 中无法导入 fs，可以参考这个 question

import fs from 'fs';

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

- zixiCat

---

我觉得我表达不清楚，我想要对CSS进行分析。在我的初始问题中，我意识到我在谈论我期望的结果时是错误的，我已经修改了问题。基本上，我需要的是将SCSS以字符串形式导入CSS格式中。你能否告诉我这是否可能？ - Daniel de Andrade Varela

Answer 2

我问了同样的问题，使用Parcel github中的“讨论”，Niklas Mischkulnig回答说，这可以使用Parcel 2完成，像这样：

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

请点击链接查看我在 Parcel GitHub 讨论区中发布的问题。

- Daniel de Andrade Varela