Snowpack - 将 scss 导入 tsx

Posted 2023-02-16

【中文标题】Snowpack - 将 scss 导入 tsx

【英文标题】：Snowpack - import scss into tsx

【发布时间】：2020-10-29 09:24:11

【问题描述】：

我正在设置一个 Snowpack 项目，目的是在配置相同的情况下将现有的 Create-React-App 应用程序移入其中。

但是，我还没有找到将.scss 文件导入.tsx 文件的方法。

Snowpack 文档似乎只讨论将 scss 配置为外部构建的资产，建议将您的 scss 放入单独的 css 文件夹 docs link 。但是，我想将我的 scss 文件保留在它们所属的 tsx 组件旁边，并将它们导入到我目前的组件中。 文档还引用了a blog post discussing a setup with PostCSS，但是该帖子表明该方法存在一些问题，包括源映射不起作用 - 这不会飞行。

我创建了这样的项目：

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

运行yarn start 时出现以下错误：

[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 App 中的工作方式一样？怎么样？

【问题讨论】：

您是否在 snowpack 配置中设置了 run:sass 脚本？ snowpack.dev/#sass

@Valentin 您链接的文档似乎在 src/css 中获取了一些 *.scss 文件并将它们编译为 public/css 中的 *.css 文件。但是，我正在尝试编译我的 scss 文件，然后将其作为 JS 捆绑到我的 JS 捆绑文件中 - 复制 webpacks sass 加载器的行为。

【参考方案1】：

虽然我没有完整的答案，但我遇到了和你一样的问题。您基本上想要实现的是，向 Snowpack 的构建管道添加其他工具。

如果你输入Babelwith Snowpack，你可以添加任意荒谬的 babel 插件来满足你所有的转换需求。

使用@researchgate/babel-plugin-transform-scss-import-to-string 并将其添加到我的babel.config.js 中，我能够将我的Sassy 内容转译成字符串。

但是，这不是一个完整的解决方案；因为现在 Snowpack 不会在我的 Sass 文件中获取更改... :( 似乎很多那些新的 anti bundlers 就是这样，他们反对捆绑，因此将它们与额外的 pre 相结合- 处理过去由我们优秀的旧捆绑器完成的东西很麻烦。

【讨论】：

谢谢，这是一个不错的解决方法！我已经从 Snowpack 转到 ViteJS，在那里取得了更大的成功！