CODEWITHSUNDEEP
twitter-bootstrap-3sassgulplaravel-5laravel-elixir
Michael
Michael

Reputation: 4400

Unable to customise Twitter Bootstrap using SASS, Laravel 5, and Elixir/Gulp

This is what my app.scss looks like:

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

This is what my directory structure looks like.

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

My question is: How do I "override" Bootstrap so that my $brandColor for example is used?

Upvotes: 2

Views: 827

Answers (1)

Marcin Nabiałek
Marcin Nabiałek

Reputation: 111869

I don't know what's your bootstrap directory structure but you could do something like that:

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

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

$brandColor : red;

@import "packages/stylesheets/bootstrap";

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

Of course you should use correct paths for this.

Just in case - it's not a complete solution for L5 and Elixir but I used this method for L4

EDIT

Try with this (not tested):

@import "bootstrap/variables";

$brandColor: red;

@import "bootstrap";

Upvotes: 3

Related Questions