2

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

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

Snowpack 文档似乎只讨论将 scss 配置为外部构建的资产，建议将您的 scss 放入单独的css文件夹 { docs link }。但是，我想将我的scss文件保留在它们所属的组件旁边，tsx并将它们导入到我目前的组件中。该文档还引用了一篇讨论 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 中的工作方式一样吗？如何？

4

1 回答 1

1

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

如果您将Babel 与 Snowpack 一起使用，您可以添加任意荒谬的 babel 插件来满足您的所有转换需求。

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

但是，这不是一个完整的解决方案；因为现在 Snowpack 不会在我的 Sass 文件中获取更改... :( 似乎很多新的反捆绑器就是这样，它们反对捆绑，因此将它们与过去的额外预处理内容相结合由我们优秀的老打包机完成很麻烦。

于 2020-11-12T15:09:03.280 回答