如何在 CodeSandbox 中使用 Scss 文件？

Posted 2023-02-19

【中文标题】如何在 CodeSandbox 中使用 Scss 文件？

【英文标题】：How do I use Scss files in CodeSandbox?

【发布时间】：2018-12-29 09:21:45

【问题描述】：

我之前没有在除了 codepen 之外的任何东西中使用过 SASS 或 SCSS，如果这是一个基本问题，我深表歉意，但我的 CSS 工作正常，但我想嵌套一些标签，当我设置 SCSS 和 SASS 依赖项时将我的文件名更改为 .scss，我的所有格式都消失了。我在某处读到了有关将 scss 文件导入 css 文件的内容，但我不确定如何实现。

这里是代码沙箱的链接：https://codesandbox.io/s/oj15rk1vw9

【参考方案1】：

如果你只是将style.css 的所有实例更改为style.scss，那么它会起作用

【讨论】：

您必须确保已安装 node-sass 软件包。 See docs.

我还需要确保将沙箱模板设置为 react 并将这些行添加到我的 package.json 中的 scripts 组 "build:css": "node-sass src/ -o src/ ", "watch:css": "npm run build:css && node-sass src/ -o src/ -w -r"

【参考方案2】：

使用 Parcel Bundler 模板而不是 create-react-app 模板

此外，如果您使用 react add react 和 react-dom 作为依赖项，因为 Parcel Bundler 模板仅附带 parcel 作为开发依赖项

https://codesandbox.io/s/q7877ov756

【讨论】：

有没有办法改变模板而不必创建一个全新的沙箱并复制所有内容？

不知道对不起，我知道你可以从Github或者cli导入项目

我刚刚尝试了一个包裹并复制了所有内容，现在什么都没有显示。想看吗？ codesandbox.io/s/rw0j2orqmp

刚刚想通了。这是因为我没有在索引中设置脚本。 parcel 和 react 模板之间有什么区别，例如 index.html 不能在公共文件夹中并且必须在 index.html 中明确指出脚本源？