Sass Snowpack-将SCS导入tsx

我正在建立一个Snowpack项目，目的是一旦配置相同，就将现有的CreateReact应用程序移动到其中

但是，我还没有找到将

.scss

文件导入

.tsx

文件的方法

Snowpack文档似乎只讨论将SCS配置为外部构建的资产，建议将SCS放入单独的

css

文件夹{}。但是，我希望将我的

scss

文件保留在它们所属的

tsx

组件旁边，并将它们导入到当前的组件中。 文档中也提到了这一点，但是这篇文章提出了这种方法的一些问题，包括sourcemaps不起作用——这是行不通的

我创建的项目如下所示：

npx create-snowpack-app my-sweet-app --template @snowpack/app-template-react-typescript --use-yarn

然后我添加了一个新的scss文件，

src/test.scss

$best-colour: tomato;

body {
    background-color: $best-colour;
}

并在我的

src/App.tsx

文件中添加了一个导入：

import './test.scss';

运行

纱线启动时

出现以下错误：

[error] [404] /_dist_/test.css.proxy.js
    ✘ /home/me/repos/my-sweet-app/public/_dist_/test.css
    ✘ /home/me/repos/my-sweet-app/src/test.css

---

是否可以将Snowpack配置为将scss文件导入tsx文件，相当于它在Create React应用程序中的工作方式？怎么做？

虽然我没有一个完整的答案，但我面临着和你一样的问题。您基本上想要实现的是，向Snowpack的构建管道添加额外的工具

如果你加入，你可以为你所有的转换需求添加任意的巴别塔插件

使用它并将其添加到我的

babel.config.js

中，我能够将我的时髦东西转换成字符串

---

然而，这并不是一个完整的解决方案；因为现在Snowpack将无法获取我的Sass文件中的更改…：（看起来很多新的反捆绑软件都是这样的，它们反对捆绑，因此将它们与以前由我们优秀的旧捆绑软件所做的额外预处理工作结合起来是很麻烦的。

您是否在您的snowpack配置中设置了

run:sass

脚本？@Valentin您链接的文档似乎占用了一些*.scss文件。）在src/css中编译为*.css文件，在public/css中编译为*.css文件。然而，我正在尝试编译我的scss文件，然后在我的JS捆绑文件中捆绑为JS-复制webpacks-sass-loader的行为。谢谢，这是一个不错的解决办法！我已经从Snowpack迁移到ViteJS，在那里取得了更大的成功！