无法使用 SASS、Laravel 5 和 Elixir/Gulp 自定义 Twitter Bootstrap

Question

这是我的 app.scss 的样子：

@import "variables";
@import "bootstrap";
@import "animate/animate";
@import "font-awesome/font-awesome";
@import "style";

这是我的目录结构。

Resources
    └── assets
        ├── js
        └── sass
            ├── animate
            │   ├── animations
            │   │   ├── attention-seekers
            │   │   ├── zoom-enter
            │   │   └── zoom-exit
            │   └── helpers
            ├── bootstrap
            ├── _bootstrap-compass.scss
            ├── _bootstrap-mincer.scss
            ├── _bootstrap-sprockets.scss
            ├── _bootstrap.scss
            └── bootstrap
                ├── _alerts.scss
                ├── _badges.scss
                ├── _breadcrumbs.scss
                ├── _type.scss
                ├── _utilities.scss
                ├── _variables.scss
                ├── _wells.scss
                └── mixins
                    ├── _alerts.scss
                    ├── _background-variant.scss
                    ├── _text-emphasis.scss
                    ├── _text-overflow.scss
                    └── _vendor-prefixes.scss

我的问题是：如何 "override" Bootstrap 以便使用我的 $brandColor 示例？

Answer 1

我不知道你的 bootstrap 目录结构是什么，但你可以这样做：

$icon-font-path: "packages/fonts/bootstrap/";

@import 'packages/stylesheets/bootstrap/variables';

$brandColor : red;

@import "packages/stylesheets/bootstrap";

@import "packages/stylesheets/bootstrap/theme";

当然你应该为此使用正确的路径。

以防万一 - 这不是 L5 和 Elixir 的完整解决方案，但我将此方法用于 L4

编辑

试试这个（未测试）：

@import "bootstrap/variables";

$brandColor: red;

@import "bootstrap";