模板::错误（未定义的 mixin 'border-radius'。）：答案

【问题标题】：Template::Error (Undefined mixin 'border-radius'.):模板::错误（未定义的 mixin 'border-radius'。）：
【发布时间】：2017-03-26 11:41:26
【问题描述】：

在我的 Rails 应用程序中添加引导模板时出现此错误：

ActionView::Template::Error (Undefined mixin 'border-radius'.):
    2: <html>
    3: <head>
    4:   <title>Zunosys</title>
    5:     <%= stylesheet_link_tag    'application', media: 'all', 'data-turboli
nks-track' => true %>
    6:   <%= javascript_include_tag 'application', 'data-turbolinks-track' => tr
ue %>
    7:   <%= csrf_meta_tags %>
    8: </head>
  app/assets/stylesheets/_accordion.scss:6:in `border-radius'
  app/assets/stylesheets/_accordion.scss:6
  app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_ht
ml_erb___752436248_72006156'

我的应用程序.css.sass

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

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

我的应用程序.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Zunosys</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

我的手风琴.scss

/* Accordion
----------------------------------------------------------*/

.panel-group .panel {
    @include border-radius(0);
}

.panel {
    @include box-shadow(none);
}

.panel-heading {
    @include border-radius(0);
}

.panel-default {
    .panel-heading {
        background-color: $color-grey;
    }
}

.panel-group {
    .panel-2 {
        background: transparent;

        .panel-heading {
            padding: 18px 0px 18px 45px;
            border-bottom: 1px solid $color-line-dark;

            .panel-title {
                position: relative;
                font-size: 20px;

                > a {
                    &:before {
                        position: absolute;
                        top: 0;
                        left: -40px;
                        width: 24px;
                        height: 24px;
                        content: ' ';
                        @include border-radius(50%);
                        background: $color-grey-3;
                        color: #fff;
                        font-family:'FontAwesome';
                        font-size: 14px;
                        text-align: center;
                        padding: 5px;
                        content:"\f068";
                    }
                    &[aria-expanded="false"]:before {
                        content: "\f067";
                    }
                }   
            }
        }
        .panel-body {
            border-top: none !important;
            padding: 18px 0px 18px 45px;
        }

        & + .panel-2 {
            margin-top: 0;
        }
    }
}

html[dir="rtl"] {
    .panel-group {
        .panel-2 {
            .panel-heading {
                padding: 18px 45px 18px 0;
                .panel-title {
                    > a {
                        &:before {
                            right: -40px;
                            left: auto;
                        }
                    }   
                }
            }
            .panel-body {
                padding: 18px 45px 18px 0;
            }
        }
    }
}

我的宝石文件

source 'http://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.7'
# Use sqlite3 as the database for Active Record
group :development, :test do
  gem 'sqlite3'
end

group :production do
  gem 'pg'
end
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'

gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
gem 'compass'

# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

我以前在我的其他 Rails 项目中使用过这个主题，效果很好。

【问题讨论】：

嗯，你得到这个错误可能是因为你没有声明 mixin。
Unexpected token error while pushing to heroku for the first time的可能重复

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

【解决方案1】：

我以前没有使用过 mixins，但看起来 @hanners66 是对的（因为你还没有在此处显示该声明）。你需要声明它。如果你想用谷歌搜索“mixin”，你会发现：

http://sass-lang.com/guide

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

【讨论】：