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

Posted 2023-03-06

【中文标题】使用 Parcel、SASS 和 TypeScript 将 SCSS 文件作为 CSS 字符串导入

【英文标题】：import a SCSS file as a CSS string using Parcel, SASS and TypeScript

【发布时间】：2021-08-11 04:55:43

【问题描述】：

有没有办法使用 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  

但不能正常工作。

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

【参考方案1】：

直接调用readFileSync这个方法就行了

如果你不能在 typescript 中导入fs，你可以关注这个question

import fs from 'fs';

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

【讨论】：

我觉得我表达得不好，我想分析一下 CSS。在我最初的问题中，我意识到我在谈论预期结果的部分是错误的，我已经改变了问题。基本上，我需要的是在 CSS 格式的字符串中导入 SCSS。你知道说这是否可能吗？

【参考方案2】：

我在 Parcel github 的“讨论”中问了同样的问题，Niklas Mischkulnig 回答了我，他告诉我这可以通过 Parcel 2 完成，如下所示：

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

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