@mixin 未在 saas 文件中定义答案

【问题标题】：@mixin not defined in saas file@mixin 未在 saas 文件中定义
【发布时间】：2015-08-01 20:15:22
【问题描述】：

这是我的 rails 应用程序中的资产文件结构

assets
-- stylesheets
----- application.scss
----- homes.scss

Gemfile 包含

gem 'bootstrap-sass'

application.scss 包含

@import "bootstrap-sprockets";
@import "bootstrap";

homes.scss 包含

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
   .shop{
     height: 250px;
     border: solid 1px #000;
   }
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {  }

当我运行应用程序时，这些 mixin（@screen-sm-min、@screen-md-min、@screen-lg-min）没有定义。我无法弄清楚我在这里做错了什么。我会很感激的

【问题讨论】：

标签： css ruby-on-rails twitter-bootstrap saas

【解决方案1】：

Sass 的import 语句在这种情况下与 CSS 的行为略有不同，因为它将在 Sass 代码编译为 CSS 时使 mixin 可用。您的应用程序会分别编译 home.scss 和 application.scss，这意味着在编译 CSS 时，有问题的 mixin 在 home.scss 中不可用，因为它们没有在此上下文中导入。

您必须将 home.scss 重命名为 _home.scss 并将其包含到您的 application.scss 文件中，然后仅使用您的标记提供它（假设您当前同时提供两者）或导入引导依赖项也位于您的 home.scss 文件的顶部。

【讨论】：