如何在 Rails 应用程序中导入 SCSS mixin？答案

【问题标题】：How to import SCSS mixins in a Rails app?如何在 Rails 应用程序中导入 SCSS mixin？
【发布时间】：2014-09-11 07:08:51
【问题描述】：

试图弄清楚如何在 Rails 4 应用程序中导入一些 SCSS 文件。这些文件是：

@import "shared/mixins",
        "shared/reset",
        "shared/about-light";

我不确定如何正确执行此操作，也不知道如何设置路径。

我将这些文件放在一个名为 "shared" 的文件夹中，然后将此文件夹放在 /lib/assets/css/ 中，这是正确的做法吗？

还尝试将文件放入/vendor/assets/stylesheets/

如何正确导入这些文件？

错误：

File to import not found or unreadable: mixins.
Load paths:

【问题讨论】：

【解决方案1】：

我们通常将 mixins 放在一个名为 _mixins.scss 的部分文件中，直接在 app/assets/stylesheets/ 目录中，如果您想要更多组织，可能在像 shared 这样的子目录下。然后你可以在你的application.css 中做（就像你做的那样）

@import 'shared/mixins';
@import 'shared/colors';

或其他。如果您真的希望他们坐在其他地方，您应该查看 SASS 的 load_paths 配置设置。您可以告诉 SASS 在导入文件时在哪里查看，默认情况下可能不包括 lib/assets 和 vendor/assets。

要添加此配置，在您的 environment.rb 或其他配置文件中，您可以执行类似的操作

config.sass.load_paths << File.expand_path('../../vendor/assets/stylesheets/')

除了默认搜索的所有其他目录之外，这将使 SASS 在 vendor/assets/stylesheets 中查找。

【讨论】：

【解决方案2】：

我认为你混淆了部分和混合。

来自 Sass 文档：

混音

“mixin 让您可以创建一组 CSS 声明，以便在整个站点中重复使用。您甚至可以传递值以使您的 mixin 更加灵活。您可以将 mixin 想象成一个用于 css 的函数（太棒了！）。”更多关于 mixins here.

部分

“您可以创建包含少量 CSS 的部分 Sass 文件，您可以将其包含在其他 Sass 文件中。这是模块化 CSS 并有助于使事情更易于维护的好方法。部分只是一个 Sass以前导下划线命名的文件。”更多关于部分here.

因此，您尝试导入的内容确实是部分，并且应该以下划线开头。

您的目录结构应如下所示：

assets
  stylesheets
    application.css.scss
    shared
      _mixins.scss
      _reset.scss
      _about-light.scss

您的 application.css.scss 文件应该如下所示：

@import "mixins";
@import "rest";
@import "about-light";

【讨论】：

【解决方案3】：

好的，所以我可以按如下方式解决这个问题：

在application.rb 中添加以下内容：

config.sass.load_paths << File.expand_path('../../vendor/assets/stylesheets/')
在 CSS 文件中导入为：

@import "mixins", "reset", "about-light";
将文件放入：

/vendor/assets/stylesheets/
重启服务器。

【讨论】：