在使用 bootstrap gem 时包含特定的 Bootstrap less 文件
Include specific Bootstrap less file, when using bootstrap gem
我正在使用:
gem 'less-rails'
gem 'less-rails-bootstrap', '~> 3.3'
我想根据 bootstrap 现有的警报警告制作自定义 CSS 警报 class。
深入研究 bootstrap 的 alerts.less,我发现警报是通过以下方式定义的:
.alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
}
所以理想情况下我想做这样的事情:
.my-warning {
.alert-variant(red; @alert-warning-border; @alert-warning-text);
}
但是要做到这一点,我需要通过@include 引入 alerts.less 和 variables.less。
鉴于我正在使用 gem,我该怎么做?
在 https://github.com/metaskills/less-rails-bootstrap 你可以阅读:
Please see the less-rails-bootstrap-test repo for examples that
customize the CSS output by using LESS. The "CSS Tests Suites" section
of the README and code is what you want to focus on. Also, check out
the LESS syntax.
然后你会发现:https://github.com/metaskills/less-rails-bootstrap-test#basic-less-bootstrap。所以在你的情况下:
/*
*= require basic_less/index
*/
@import "twitter/bootstrap";
.my-warning {
.alert-variant(red; @alert-warning-border; @alert-warning-text);
}
我正在使用:
gem 'less-rails'
gem 'less-rails-bootstrap', '~> 3.3'
我想根据 bootstrap 现有的警报警告制作自定义 CSS 警报 class。
深入研究 bootstrap 的 alerts.less,我发现警报是通过以下方式定义的:
.alert-warning {
.alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
}
所以理想情况下我想做这样的事情:
.my-warning {
.alert-variant(red; @alert-warning-border; @alert-warning-text);
}
但是要做到这一点,我需要通过@include 引入 alerts.less 和 variables.less。
鉴于我正在使用 gem,我该怎么做?
在 https://github.com/metaskills/less-rails-bootstrap 你可以阅读:
Please see the less-rails-bootstrap-test repo for examples that customize the CSS output by using LESS. The "CSS Tests Suites" section of the README and code is what you want to focus on. Also, check out the LESS syntax.
然后你会发现:https://github.com/metaskills/less-rails-bootstrap-test#basic-less-bootstrap。所以在你的情况下:
/*
*= require basic_less/index
*/
@import "twitter/bootstrap";
.my-warning {
.alert-variant(red; @alert-warning-border; @alert-warning-text);
}