css - 在 Rails 中使用 sass 的正确方法

Question

起初，我将所有的 css 样式写在一个文件中，但事情变得复杂了，所以我将我的 sass 文件分成文件夹。我从互联网上找到了一篇文章，然后照做了。它说“如果我们把 _ 放在 sass 文件前面，它不会被编译器索引”

• 创建了 3 个文件夹
• 像那样创建文件 _test_name.scss
• 为每个文件夹创建 _index.scss 文件并导入所有其他 scss该文件夹中的文件
• 创建 main.scss 文件并导入其中的所有 index.scss 文件。

一切正常但是如果我在其他文件夹的某处使用颜色变量，它就不会工作。它给了我 undefined variable 错误消息。之后我导入了颜色 scss 文件然后它工作了。但这很奇怪吧？它应该在不导入颜色 scss 文件的情况下工作。现在问题是，如果我在开发人员工具中看到我的样式，相同的样式会重复三次!请检查图片

我是不是做错了什么？

Answer 1

使用 Sprockets指令不适用于 SASS。

Sprockets provides some directives that are placed inside of comments called require, require_tree, and require_self. DO NOT USE THEM IN YOUR SASS/SCSS FILES. They are very primitive and do not work well with Sass files. Instead, use Sass's native @import directive which sass-rails has customized to integrate with the conventions of your Rails projects.

因此，您应该做的第一件事就是删除 application.scss 和 leave the compilation to SASS 中的所有 sprockets 指令。 *。这是最可能的解释，说明为什么您看到相同的样式应用了三次作为 require_tree 。 吸收了所有部分。

所以你应该这样做:

@import "test_name"

sass-rails 提供了 globbing 功能，也可用于要求目录中的所有部分。

@import "mixins/*" 
@import "mixins/**/*"

然而，通常最好手动导入依赖项，因为加载顺序很难确定。