---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";
/* path to glyphicons */
$icon-font-path: "/bower_components/bootstrap-sass/assets/fonts/bootstrap/";
/* custom variable */
$body-bg: red;
/* any style customization must be before the bootstrap import */
@import "bootstrap";
sass:
sass_dir: assets/css
# Exclude from processing.
exclude:
- bower_components
3. Sass
我修改了assets/css/main.scss如下:
---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";
@import "variables"; // (2)
@import "../../bower_components/bootstrap/scss/bootstrap"; // (1)
// Import other styling below
// ...
4条答案
按热度按时间e0bqpujr1#
由于Jekyll本身支持sass,因此可以使用bootstrap-sass。
我个人使用
bower install bootstrap-sass
命令安装它。这将在
bower_components
文件夹中安装Bootstrap和Jquery。配置
在您的_config.yml中添加:
JavaScript
如果你想使用JavaScript,在你的_includes/footer.html中添加:
使用
在
css/main.scss
中删除以前的内容并添加您可以查看
bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
中可用的所有变量您可以删除旧的_sass文件夹。
现在你的css文件是在每次构建时生成的。
fnx2tebb2#
更新Bootstrap 4.3.1和Jekyll 4.0
您可以使用bunder将BS安装到您的站点
将其添加到gem文件:
获取BS的路径
将该路径添加到_config.yml
也可以改为添加相对路径。
最后,将bootstrap添加到
style.scss
https://getbootstrap.com/docs/4.3/getting-started/download/
jmp7cifd3#
Bootstrap 4 Beta更新
As Bootstrap 4 Beta now runs on Sass,你可以使用“官方”bower包。
我是这样做的:
1.使用Bower安装Bootstrap
bower install bootstrap#v4.0.0-beta --save
将Bootstrap及其依赖项安装到bower_components
文件夹。2.配置
在
_config.yml
中,我更改了Sass文件夹并将bower_components
从处理中排除:3. Sass
我修改了
assets/css/main.scss
如下:**(1)**注意,第二个import语句必须相对于
_config.yml
中指定的Sass目录。因为我选择它作为还包含main.scss
的文件夹,所以您最喜欢的IDE中的资源链接(例如:WebStorm)不会崩溃。**(2)**为了覆盖Bootstrap Sass变量,我创建了
assets/css/_variables.scss
,它必须在Bootstrap库之前导入。4. JavaScript
由于我没有找到一种方法来使用
bower_components
中附带的JS,我选择包含Bootstrap建议的CDN版本:djp7away4#
一个不同的方法从GorvGoyl的答案,可以安装gems在您的项目文件夹。通过这种方式,依赖关系与项目绑定在一起。
预设
创建新的空白项目:
在项目文件夹中移动并初始化Bundler:
在项目子目录中配置Bundler安装路径:
现在,与Bundler一起安装的gem将位于
vendor/bundler
项目子目录下。将Jekyll添加到Gemfile:
将Bootstrap添加到项目中
将Bootstrap添加到Gemfile:
获取Bootstrap路径:
将相对引导路径添加到
_config.yml
:最后一步,在
asset/css
路径下的主.scss
文件中导入Bootstrap: