能否在 SCSS 中导入 SASS 文件？

Question

样式.scss

@import 'packages/bulma.sass';

bulma.sass

该文件是一个Sass库，用于构建现代、响应式的网站和应用程序界面。它包含了许多CSS类和组件，可以帮助您快速创建漂亮的UI。以上代码用于导入这个库以便在您的项目中使用它。

@charset "utf-8"
/*! bulma.io v0.6.1 | MIT License | github.com/jgthms/bulma */
@import "sass/utilities/_all"
@import "sass/base/_all"
@import "sass/elements/_all"
@import "sass/components/_all"
@import "sass/grid/_all"
@import "sass/layout/_all"

终端

'错误：客户端/软件包/bulma.sass.scss不存在！

是否可以将SASS导入到SCSS文件中？在scss环境中安装Bulma的最佳方法是什么？

我还尝试过@import 'packages/bulma'，但出现了客户端/软件包/bulma.scss不存在！的错误。

- Omar

---

什么是 .sass 文件？SASS（Syntactically Awesome Style Sheets）这个 CSS 预编译器使用 .scss 文件（SASS 层叠样式表）。 - zgood

.sass 是一种东西。我保证。 - Omar

.sass 文件？不是 .scss 吗？ - enbermudas

@EnriqueBermúdez SCSS 是 Sass CSS 预处理器支持的主要语法。以 .scss 结尾的文件代表 Sass 支持的标准语法。SCSS 是 CSS 的超集。 以 .sass 结尾的文件代表 Sass 支持的“旧”语法，起源于 Ruby 世界。 - The Dead Man

我理解了语法上的差异。只是想知道它们是否与@import一起使用。 - Omar

Answer 1

可以试着移除 .sass 扩展名吗？简称 TL;DR。

@import 'packages/bulma';

以下是关于 这篇 文章的更详细解释：

Sass中的@import指令扩展了CSS @import规则，使其可以与.scss和.sass文件配合使用。它会引入所引用的文件以及在引入文件中定义的任何变量或mixin，从而可以在主文件中使用。

@import "typography.scss";

假设在当前目录下有一个文件 typography.scss，那么 typography.scss 的内容将替换 @import 语句。

Sass 使得这一过程更加简单。如果您忘记了包含扩展名，它会寻找同名文件，并使用 .scss 或 .sass 扩展名中的任意一个。

@import "typography";

上述语句将在导入字体样式的文件所在目录中查找typography.scss或typography.sass。

- hcs

---

我尝试使用 @import 'packages/bulma'，但出现了 'client/packages/bulma.scss doesn\'t exist!' 的错误提示，不过我认为这可能是设置问题。 - Omar

你正在使用webpack吗？如果是的话，这个链接可能会有所帮助。如果你只是在使用Node，我认为你需要使用node-sass包——它的文档可以在这里找到。 - hcs

Answer 2

@Hector是对的，我只想补充一些其他的东西。

1. 有效的内容已经在语言文档https://sass-lang.com/documentation/file.SASS_REFERENCE.html#import中涵盖了，所以双重导入可能是一个node-sass的bug，但扩展行为将在下一个版本的Sass中发出警告。Libsass通过sass2scss库运行来将“不支持”的旧.sass转换为.scss。

2. 从导入中删除前导_，这些是无效的

- nschonni

Answer 3

使用 @import "../node_modules/bulma/bulma.sass"; 替代 @import 'packages/bulma.sass';

这样不会出现任何错误。如需更多信息，请查看 link

- Alweena Iqbal