【问题标题】:Unable to customise Twitter Bootstrap using SASS, Laravel 5, and Elixir/Gulp无法使用 SASS、Laravel 5 和 Elixir/Gulp 自定义 Twitter Bootstrap
【发布时间】:2015-02-19 22:36:25
【问题描述】:

这就是我的 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

我的问题是:如何“覆盖” Bootstrap 以便使用我的 $brandColor 示例?

【问题讨论】:

    标签: twitter-bootstrap-3 sass gulp laravel-5 laravel-elixir


    【解决方案1】:

    我不知道你的引导目录结构是什么,但你可以这样做:

    $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";
    

    【讨论】:

    • 不幸的是,这不起作用,我的 CSS 必须在其他地方被覆盖。这是正确的方法吗?另外,当我在这种情况下在第三行 @import "bootstrap" 时,这不会导入整个目录内容,包括变量吗?
    • @Mike 对您有帮助还是您使用了其他方法?
    • 我最终按照您的建议完成了工作。谢谢。
    猜你喜欢
    • 1970-01-01
    • 2016-07-02
    • 2015-05-05
    • 2015-10-25
    • 1970-01-01
    • 2015-12-07
    • 2014-05-31
    • 2016-01-05
    • 1970-01-01
    相关资源
    最近更新 更多