Sass：：SyntaxErrors in Pages#index ： 错误消息 未定义的变量： "$enable-grid-classes"

Question

在我的项目中，我试图获得朋友发送的配置。以下是我目前所做的步骤：-打开一个新项目rails-复制/粘贴他的包.json-运行npm安装-复制我的项目中的css和脚本文件夹

现在我在Pages#索引中出现了错误Sass:：SyntaxError/未定义的变量："$enable网格类"。当我尝试导入..时/node_modules/bootstraps/scs/grid">

这是我的应用程序.scss

*/
@charset "UTF-8";
/* // 0. Configuration and helpers */
@import "abstracts/_variables.scss"; 
@import "abstracts/_mixins.scss";
/* // @import "abstracts/animations"; */
/* // 1. External */
@import "vendors";
/* // 2. Base stuff */
@import "base/reboot";
@import "base/base";
@import "base/grid";
@import "base/utilities";
/* // 3. Components */
@import "components/about";
@import "components/accordion";
@import "components/advantage";
@import "components/burger";
@import "components/button";
@import "components/card";
@import "components/computer";
@import "components/creditcard";
@import "components/detail";
@import "components/demo";
@import "components/feature";
@import "components/gallery";
@import "components/hero";
@import "components/intro";
@import "components/job";
@import "components/keyfact";
@import "components/leader";
@import "components/link";
@import "components/menu";
@import "components/notice";
@import "components/optin";
@import "components/popover";
@import "components/press";
@import "components/pricing";
@import "components/profile";
@import "components/rotate";
@import "components/sheet";
@import "components/shape";
@import "components/slider-advantages";
@import "components/slider-customers";
@import "components/slider-press";
@import "components/slider-sheets";
/* // @import "components/slider-team"; */
@import "components/star";
@import "components/sticky";
@import "components/switch";
@import "components/tab";
@import "components/team";
@import "components/testimony";
@import "components/title";
@import "components/trust";

以及我有错误的css文件：

.col-d {
display: flex;
}
@include mq {
@include col;
}
@include mq(ml) {
@include col(79px);
}
// @include mq(l) {
//   @include col(104px);
// }
@include mq(xl) {
@include col(122px);
}
$grid-columns: 12;
$grid-gutter-width: $gutter;
$grid-breakpoints: (
s: 0,
t: $mq-t,
m: $mq-m,
ml: $mq-ml,
// l: $mq-l,
xl: $mq-xl,
);
$container-max-widths: (
t: $container-t,
m: $container-m,
ml: $container-ml,
// l: $container-l,
xl: $container-xl,
);
@import "../../../../node_modules/bootstrap/scss/grid";
@import "../../../../node_modules/bootstrap/scss/utilities/flex";

我的gemfile:

ruby '2.6.3'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Active Storage variant
# gem 'image_processing', '~> 1.2'
#Contentful 
gem 'contentful', '~> 2.14'
#contentful rails 
gem 'contentful_rails', '~> 0.5.0'
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.6'
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
# Easy installation and use of web drivers to run system tests with browsers
gem 'webdrivers'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

我的node_modules项目是灰色的，这正常吗？如何修复此错误？

Answer 1

您是否尝试更改引导文件的加载顺序？例如

// required bootstrap files
@import "../../vendor/twbs/bootstrap/scss/functions";
@import "../../vendor/twbs/bootstrap/scss/variables";
@import "../../vendor/twbs/bootstrap/scss/mixins";
// optional bootstrap files
@import "../../vendor/twbs/bootstrap/scss/grid";
...

命名空间基于我自己的配置(使用Composer(。