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

Question

有没有办法使用 Parcel Bundler + SASS + TypeScript 将 SCSS 导入为 CSS？

我有一个名为 file.scss

的 SCSS 文件

div {
    span: {
        background: red
    }
}

所以我想在 TypeScript 中将其作为 CSS 字符串导入，我正在尝试这样的操作：

import cssString from "./file.scss"

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

但工作不正常。

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

Answer 1

直接调用这个方法readFileSync

如果无法在打字稿中导入fs，可以按照这个

import fs from 'fs';

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

Answer 2

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

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

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