标签: bootstrap-sass

我已经向Heroku部署了一个应用程序,但有一个问题似乎无法解决.app via的CSS Bootstrap-sass没有加载,因此我有一个非样式的应用程序.目前,这只是静态页面的集合.

我在README https://github.com/thomas-mcdonald/bootstrap-sass中只执行了一步.我无法弄清楚的步骤很可能是我的问题如下.由于Rails中的更改会阻止在供应商和库中编译图像,因此您需要将以下行添加到application.rb:

config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)

由于我仍然是编程的新手,第一个问题是我不知道在application.rb文件中何处以及如何添加它.如果有人能帮我告诉我如何以及在何处正确添加上述代码,我将不胜感激.

第二个问题可能与我使用的宝石有关,但是当我创建应用程序时,sass-rails gem安装了〜> 4.0.0.beta1.根据README,使用的版本是3.2.由于这也可能是一个问题,我已经包含了gem文件,任何人都可以确定这是我的问题的根本原因.

提前感谢您提供的任何帮助.

编辑:添加我在第一次尝试时采取的步骤,导致样式在我的本地主机上正常工作,但一旦代码部署到heroku就没有.

1. 创建了一个新的rails 4 app(下面的gem文件)
2. 添加了下面gem文件中列出的bootstrap-sass gem
3. 将PG gem添加到生产组中的gem文件中,并将SQLite3移至开发和测试(运行bundle install - 在步骤2和3之后不生成)
4. 为静态主页创建了一个页面控制器
5. 在主页上的英雄单元中添加了一个h1,以查看样式是否正常工作
6. 添加了styles.css.scss文件并包含了@import'bootstrap'; 到样式表
7. 创建了git存储库,运行我的初始提交并将代码推送到git
8. 创建了heroku应用程序并将主人推送到heroku

在第二次尝试时,我在主页上添加了一个导航栏(如果这对任何人都有影响)并再次执行步骤7和8,但在执行这些步骤之前,我运行了以下代码行.

RAILS_ENV=production bundle exec rake assets:precompile

我仍然最终得到了一个在我的本地主机上具有正确风格的网站,但没有样式在Heroku上工作.正如我在上一篇文章中所提到的,有一行代码需要添加到我没有遵循的application.rb文件中,因为我对如何正确地将代码行添加到文件中缺乏了解.

的Gemfile:

source 'https://rubygems.org'

ruby "2.0.0"

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.0.beta1'

group :production do
gem 'pg'
end

group :development, :test do
gem 'sqlite3'
end

# Gems used only for assets and not …

我刚刚安装了一个新的Laravel 5.4和bootstrap 4 alpha 6. Laravel mix不会编译SASS:这是一个错误:

    Module build failed: ModuleBuildError: Module build failed: 
$input-height:                   (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;
                                ^
      Incompatible units: 'rem' and 'px'.
      in /Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/bootstrap/scss/_variables.scss (line 444, column 34)
    at runLoaders (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/webpack/lib/NormalModule.js:192:19)
    at /Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/loader-runner/lib/LoaderRunner.js:364:11
    at /Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/loader-runner/lib/LoaderRunner.js:230:18
    at context.callback (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.asyncSassJobQueue.push [as callback] (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/lib/loader.js:57:13)
    at Object.<anonymous> (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:2262:31)
    at apply (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:20:25)
    at Object.<anonymous> (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:56:12)
    at Object.callback (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/sass-loader/node_modules/async/dist/async.js:944:16)
    at options.error (/Volumes/HDD/nicolae/Dev/htdocs/test/node_modules/node-sass/lib/index.js:294:32)

 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

有人通过了吗？如何？

所有的道路都指向bootstrap-sass

推荐链:

• railscast-328(twitter bootstrap basics)指的是
• http://www.sitepoint.com/twitter-bootstrap-less-and-sass-understanding-your-options-for-rails-3-1/指的是
• https://github.com/jlong​​/sass-bootstrap反过来惊叹有一个新的官方端口引导到sass at
• https://github.com/twbs/bootstrap-sass这是twitter-bootstrap文章中的另一个选项

它被报告为bootstrap-rails gem的一个问题:https://github.com/anjlab/bootstrap-rails/issues/91

我相信我正确安装了它

宝石

gem 'sass-rails', '>= 3.2' # sass-rails needs to be higher than 3.2
gem 'bootstrap-sass', '~> 3.1.1'

安装(在资产组的外部和内部尝试),application.css.scss包含

@import "bootstrap";

只要.

但它给了我一个错误

尝试bundle exec rake assets:precompile时会出现此错误:

rake aborted!
Undefined variable: "$alert-padding".
  (in /home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/bootstrap-sass-3.1.1.0/vendor/assets/stylesheets/bootstrap/_alerts.scss)
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/bootstrap-sass-3.1.1.0/vendor/assets/stylesheets/bootstrap/_alerts.scss:10
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/script/variable.rb:49:in `_perform'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/script/node.rb:40:in `perform'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:298:in `visit_prop'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:37:in `visit'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:100:in `visit'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `block in visit_children'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `map'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/base.rb:53:in `visit_children'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:109:in `block in visit_children'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:121:in `with_environment'
/home/joe/.rbenv/versions/1.9.3-p448/lib/ruby/gems/1.9.1/gems/sass-3.2.7/lib/sass/tree/visitors/perform.rb:108:in `visit_children' …

我使用bootstrap-sass将bootstrap集成到我的应用程序中.该应用程序在我的本地计算机上工作正常,但当我通过capistrano部署时,我收到此错误:

Undefined variable: "$baseLineHeight".
(in /var/www/CollegeSportsBlueBook/shared/bundle/ruby/1.9.1/gems/bootstrap-sass-2.0.1/vendor/assets/stylesheets/bootstrap/_accordion.scss)

当capistrano试图跑 assets:precompile

我认为这个变量抛出错误,因为它是第一个尝试预编译的scss文件中的第一个变量.

有些事情没有正确加载.任何想法可能是什么？

编辑

完整跟踪https://gist.github.com/2233071

编辑2

将application.rb和production.rb添加到gist

我想设置引导上Rails4使用bootstrap-sass和我得到这个著名的错误:

Sprockets::FileNotFound - couldn't find file 'bootstrap'
  (in app/assets/javascripts/application.js:16):

我试过以下:

1. twitter/bootstrap 在 application.js
2. gem 'bootstrap-sass', '~> 3.1.0' 是集团外资产
3. 还尝试了一些互联网上的其他东西

我花了很多时间从其他帖子中提出不同的建议.我如何系统地调试这个,如何设置bootstrap-sass？

ps: 也试图twitter-bootstrap-rails没有运气.

这是一些文件

的application.js

//= require jquery
//= require jquery_ujs
//= require js-routes
//= require bootstrap
//= require_tree .
//= require bootstrap-slider

application.css.scss

 *= require jquery.ui.core
 *= require jquery.ui.theme
 *= require_self
 *= require bootstrap-slider
 *= require_tree .
 *= stub active_admin
*/

@import "bootstrap";

的Gemfile

source 'https://rubygems.org'
ruby '2.0.0'
gem 'rails', '4.0.0' …

我刚刚开始使用Vue.js + Webpack + vue-loader + bootstrap-sass + sass-loader,我有点失落.

我想要做的是使用我的SPA Vue.js代码的SASS版本的bootstrap.我想这样做,所以我的引导自定义可以使用SASS完成.这就是我所做的:

• 使用vue-cli创建了一个新的Vue.js + webpack项目.
• 安装bootstrap-sass和sass-loader.

• 在build/webpack.base.conf.js中添加了以下内容:

  { test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ] },
  { test: /\.(woff2?|ttf|eot|svg)$/, loader: 'url', query: { limit: 10000 } }
  

  Run Code Online (Sandbox Code Playgroud)

• 用一行创建了src/style.scss: @import 'bootstrap';

• 将此行添加到src/main.js的顶部: import './style.scss'

当我现在运行时,npm run dev我收到以下错误:

ERROR in ./src/main.js
Module not found: Error: Cannot resolve module 'style' in  Users/rstuart/Workspace/javascript/kapiche-demo/src
@ ./src/main.js 3:0-25

我不确定为什么这不起作用.

此外,与此问题相关,如何访问Vue组件中的Bootstrap SASS变量？如果我理解这里发生了什么,SASS将被编译为CSS,然后被包含在main.js内联中,这意味着我的组件中无法访问任何Bootstrap变量.有没有办法实现这个目标？

我对此很新,但我无法弄清楚问题.

在twitter bootstrap中我会使用:

<div class="row-fluid">
  <div class="span2">Column1</div>
  <div class="span6">Column2</div>
</div>

一切正常.但我不想直接将spanX和spanY写入我的html文件,而是想提供有意义的类名,例如:

<div class="user-container">
  <div class="user-filter">First Column</div>
  <div class="user-list">Second Column</div>
</div>

鉴于事实,我正在使用https://github.com/thomas-mcdonald/bootstrap-sass,我该如何编写我的scss文件？我尝试过以下操作,但它不起作用(不显示两列):

@import "bootstrap";
@import "bootstrap-responsive";

.user-container {
    @extend .row-fluid;
}

.user-filter {
    @extend .span2;
}

.user-list {
    @extend .span10;
}

如果我看一下生成的代码,在我看来一切都应该没问题:

/* line 164, ../../../../../.rvm/gems/ruby-1.9.3-p125/gems/bootstrap-sass-2.0.0/vendor/assets/stylesheets/bootstrap/_mixins.scss */
.span2, .user-filter {
  width: 140px;
}

等等.

我究竟做错了什么？

更新:

好吧,只是为了清楚是什么问题 - 列被列为行(一个接一个),而不是真正的列(彼此相邻),例如:

with bootstrap:Column1 Column2
with my custom classes:
First Column
Second Column

我已经检查过Chrome中的元素布局,似乎bootstrap类有float属性,而我的 - 没有.看看css源我看到这样的类:

[class*="span"] {
  float: left;
  margin-left: 20px; …

我最近开始在我的节点项目上使用bootstrap SCSS.所以我app/bower_components/bootstrap-sass/lib/_glyphicons.scss举个例子.

看看我的CSS输出,我看到的内容如下:

@media -sass-debug-info{filename{font-family:file\:\/\/\/home\/some\/path\/project\/app\/bower_components\/bootstrap-sass\/lib\/_normalize\.scss}line{font-family:\0000332}}
audio,
canvas,
video {
  display: inline-block;
}

我有两个问题:

1. 这似乎是一个安全漏洞.每个人都可以通过查看我的CSS来推断出我的操作系统和目录结构.关闭此安全漏洞的正确方法是什么？
2. 它是如何工作的？我差点搞清楚,但我错过了一些东西.看看SCSS,我看到bootstrap正在使用$icon-font-path,它显然变成了这个绝对路径.看看指南针文档,我看到它们提供绝对值,但没有$icon-font-path

这是我所指的一段代码:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('#{$icon-font-path}#{$icon-font-name}.eot');
  src: url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'),
       url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'),
       url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'),
       url('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons-halflingsregular') format('svg');
}

我使用bootstrap-sass和bootstrap-multiselect有一个奇怪的问题.看起来像bootstrap-sass事件处理程序阻止多项选择处理程序下拉等.

这个包通过凉亭安装:

'bootstrap-sass-official#3.3.1',
'bootstrap-multiselect'

应用程序构建在django和python上,所以模板将脚本绑定到页面:

{% compress js %}
    <script src="{% static 'jquery/dist/jquery.js' %}"></script>
    <script src="{% static 'bootstrap-sass/assets/javascripts/bootstrap.js' %}"></script>
{% endcompress %}

特定页面上的绑定脚本使用:

{% block extrajs %}
    <script src="{{ STATIC_URL }}bower_components/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"
            type="text/javascript" charset="utf-8"></script>
{% endblock %}

crearing multiselect控制:

$('.multiselect').multiselect()

没什么特别的.但是,当我尝试在UI上使用多选控件时,它不会下降.控制台没有错误.

在浏览代码之后,我发现有一些事件处理程序会阻止多选处理程序执行:

  // APPLY TO STANDARD DROPDOWN ELEMENTS
  // ===================================

  $(document)
    .on('click.bs.dropdown.data-api', clearMenus)
    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
    .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
    .on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
    .on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)

所以,棘手的解决方案是首先在使用多选的页面上关闭标准事件处理程序:

$(document)
     .off('click.bs.dropdown.data-api')
     .off('keydown.bs.dropdown.data-api') …

我遵循bootstrap-sass-loader页面上的instrtuctions

在我的package.json我得到了

"bootstrap-sass": "^3.3.6",
"bootstrap-sass-loader": "^1.0.9"

这是我的webpack.config.js

module.exports = {
  entry: ['./app.js'],
  output: {
    publicPath: 'http://localhost:8080/',
    filename: 'build/bundle.js'
  },
  devtool: 'eval',
  module: {
    /* used on code before it's transformed */
    preLoaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        loader: 'source-map'
      }
    ],
    /* used to modify code */
    loaders: [

      {test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery'},
      {test: /\.obj|\.mtl|\.html|\.dae|\.txt/, loader: "raw"},
      {test: /\.jsx?$/, exclude: /(node_modules)/, loader: 'babel'},
      {test: /\.css$/, loader: 'style-loader!css-loader'},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, …