Rails 少/sass 冲突

Posted 2023-03-22

【中文标题】Rails 少/sass 冲突

【英文标题】：Rails less/sass conflict

【发布时间】：2016-03-30 10:37:19

【问题描述】：

我有一个基于 LESS 的 Rails 应用程序。 因为我添加了summernote html editor，所以我还必须在我的项目中添加 SASS 代码。 所以我添加了这些行：

宝石文件：

gem 'font-awesome-rails'
gem 'summernote-rails'
gem 'bootstrap-sass'

application.css：

*= require font-awesome
*= require summernote

在本地一切正常。 当我将应用程序提交到 heroku 时，我收到以下错误：

Sass::SyntaxError: Undefined variable: "$alert-padding".
   (in /tmp/build_xxx/vendor/bundle/ruby/2.1.0/gems/bootstrap-sass-3.3.1.0/assets/stylesheets/bootstrap/_alerts.scss:10)

我想我错过了 SASS 变量，但不知道如何在不与 LESS 代码产生任何冲突的情况下添加它们。

============= 编辑 ================== 预编译在它找到的第一个 sass 变量上被破坏，在文件 /gems/bootstrap-sass-3.3.1.0/assets/stylesheets/bootstrap/_alerts.scss 中：

.alert 
  padding: $alert-padding;

我假设预编译器没有声明任何 SASS 变量，并且在它找到任何变量的第一个地方就无法预编译。

============= 编辑 ================== 我添加到我的application.scss @import 我知道我需要拥有，现在看起来像这样：

@import "bootstrap-sprockets";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap";
/*
 * 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 vendor/assets/stylesheets of plugins, if any, 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 top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require custom_bootstrap/custom_bootstrap
 *= require custom
 *= require social-share-button

 *= require bootstrap-datetimepicker

 *= require dataTables/jquery.dataTables
 *= require dataTables/src/demo_table_jui
 *= require pricing

 *= require jquery.fileupload-ui

 *= require font-awesome
 *= require social-buttons-3.css

 *= require summernote
 */

我肯定包含了_variables.scss（为了确定，我重命名了它），我看到声明了$alert-padding：

$alert-padding:               15px !default;
$alert-border-radius:         $border-radius-base !default;
$alert-link-font-weight:      bold !default;

我还是得到了这个错误！

PD - 我使用以下命令来检查本地预编译：

RAILS_ENV=development bundle exec rake assets:precompile

【参考方案1】：

您可以找到安装说明here。

我至少看不到那些：

application.css 应该是 application.scss gem 'sass-rails' 在您的 Gemfile 中 在您的application.scss 中相应并适当地使用import 语句

【讨论】：

我的 Gemfile 中已经有 gem 'sass-rails'。我将application.css 重命名为scss 扩展，但我不知道如何将其内容转换为具有sass 样式（即@import 而不是*= require）。我认识到我的问题是没有包含 sass 变量，实际上预编译在它找到的第一个变量上被破坏了......但不知道如何包含它们的声明！