这是我的 Rails 应用程序中的 Assets 文件结构
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) { }
当我运行应用程序时,未定义这些混合宏(@screen-sm-min、@screen-md-min、@screen-lg-min)。我不知道我在这里做错了什么。我将不胜感激
最佳答案
Sass 的 import
语句在此上下文中的行为与 CSS 略有不同,因为它将在 Sass 代码编译为 CSS 时使 mixin 可用。您的应用程序单独编译 home.scss
和 application.scss
这意味着当时有问题的 mixin 在 home.scss
中不可用CSS 已编译,因为它们未在此上下文中导入。
您必须将 home.scss
重命名为 _home.scss
并将其包含到您的 application.scss
文件中,然后仅提供服务这与您的标记(假设您当前正在为两者提供服务)或在 home.scss
文件的顶部导入 Bootstrap 依赖项。
关于css - @mixin 未在 saas 文件中定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31765810/