我对编程比较陌生,因此我希望这个问题不是绝对愚蠢的.
我的rails应用程序出了问题.
我尝试使用bootstrap.我构建了一个名为"custom.css.scss"的文件,并在其中使用了"@import"bootstrap""行.
问题是:每次我保存"custom.css.scss"文件时,都会自动生成一个新文件"custom.css",并收到以下消息:"custom.css.scss要导入的文件未找到或不可读:bootstrap ".
有趣的是:当我删除文件"custom.css.scss"并刷新我的浏览器时,一切都很好(这意味着:使用了bootstrap).
你有什么想法,可能是什么原因?
最亲切的问候克里斯
PS:这是我安装的gem文件
source 'https://rubygems.org'
gem 'rails', '3.2.11'
gem 'bootstrap-sass', '2.1'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.6'
gem 'jquery-rails', '2.0.2'
group :development, :test do
gem 'sqlite3', '1.3.5'
gem 'rspec-rails', '2.11.0'
# gem 'guard-rspec', '1.2.1'
# gem 'guard-spork', '1.2.0'
# gem 'spork', '0.9.2'
end
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '3.2.5'
gem 'coffee-rails', '3.2.2'
gem 'uglifier', '1.2.3'
end
group :test do
gem 'capybara', '1.1.2'
gem 'factory_girl_rails', '4.1.0'
gem 'cucumber-rails', '1.2.1', :require => false
gem 'database_cleaner', '0.7.0'
gem 'launchy', '2.1.0'
# gem 'rb-fsevent', '0.9.1', :require => false
# gem 'growl', '1.0.3'
end
group :production do
gem 'pg', '0.12.2'
end
Run Code Online (Sandbox Code Playgroud)
custom.css.scss文件如下所示
@import "bootstrap";
/* universal */
html {
overflow-y:scroll
}
body {
padding-top: 60px
}
section {
overflow: auto;
}
textarea {
resize: vertial;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.7em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #999;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
Run Code Online (Sandbox Code Playgroud)
我在使用Bootstrap 4开发Rails 6应用程序时遇到了类似的问题。
问题是我没有在我的文件中指定节点模块文件的完整路径bootstrap.scss
app/assets/stylesheets/application.scss
。
使用以下命令安装Bootstrap 4及其依赖项后:
yarn add bootstrap jquery popper.js
Run Code Online (Sandbox Code Playgroud)
我所需要做的就是将其修改为:
@import "bootstrap";
Run Code Online (Sandbox Code Playgroud)
到
@import 'bootstrap/scss/bootstrap';
Run Code Online (Sandbox Code Playgroud)
boostrap.js
然后您可以通过以下方式在文件中添加 require 该文件app/javascript/packs/application.js
:
require("bootstrap");
Run Code Online (Sandbox Code Playgroud)
就这样。
我希望这有帮助
归档时间: |
|
查看次数: |
15644 次 |
最近记录: |