5

I am using bootstrap-4 in my Vue webapp, But I am not able to customise this as is explained here.

I have my index.html which uses Bootstrap CDN, like following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Sample</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

    <link rel="stylesheet" href="/static/custom.scss" type="text/x-scss">  ==> where I am overwriting variable
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="app"></div>

    <script src="/dist/client-vendor-bundle.js"></script>
    <script src="/dist/client-bundle.js"></script> -->
  </body>
</html>

I also tried changing the order of custom.scss and bootstrap.css in index.html as well.

Following is custom.scss, where I am overwriting variables:

$body-bg:    #f5f5f5;
$body-color: #f5f5f5;
$enable-flex: true;

But this is not working.

I also tried importing this in my app component, like following:

<style lang="scss">
  @import 'custom.scss';

  // Following also did not work
  $body-bg: #333;
  $body-color: #999;  
</style>

How do I overwrite these variable to customise my webapp.

Improve this question
10
  • Did you tried to reverse order ? first include bootstrap file, then custom.css ? And btw did you re-compile code after you edit .scss file ? Commented Nov 29, 2016 at 11:44
  • Yes, as tried changing the order, and also recompiled the code. Commented Nov 29, 2016 at 11:48
  • Btw why you are incuding custom.scss file ? why you didn't include compiled .css file ? Commented Nov 29, 2016 at 11:50
  • @Belmin You mean compiled .css files of bootstrap or custom.scss? Commented Nov 29, 2016 at 11:56
  • I don't think you can do that with the cdn use the npm version where you get access to bootstrap's .scss files and compile it with your custom .scss so you can overwrite those values. Commented Nov 29, 2016 at 11:57

2 Answers 2

Reset to default
4

You can make this a lot cleaner by using the npm package and a webpack customisation.

If you first install bootstrap in your project:

npm install [email protected]

and make sure you can use sass-loader in your components:

npm install sass-loader node-sass --save-dev

now go to your webpack config file and add a sassLoader object with the following:

sassLoader: {
    includePaths: [
        path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),
    ],
},

projectRoot should just point to where you can navigate to node_packages from, in my case this is: path.resolve(__dirname, '../')

Now you can use bootstrap directly in your .vue files and webpack will compile it for you when you add the following:

<style lang="scss">
  @import "bootstrap";
</style>

To customise it I'd recommend pulling in the bootstrap _variables first and then you can reference everything like normal, i.e.

@import "_variables";

// example customisation - I'd recommend importing a file here to store them all
$body-bg: $gray-dark;

// just place all your customisation work above the below import of bootstrap
@import "bootstrap";

This will mean you need to remove any CDN CSS versions or they could overwrite things, but you should now be able to fully customise bootstrap.

As another benefit this method allows you to strip out any bootstrap components you are not using. To do so rather than @import "bootstrap"; which is the entire bootstrap library, instead navigate to that file, i.e. node_modules/bootstrap/scss/bootstrap.scss and then copy across the @import's you actually want. Essentially optimising your project...

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

I tried following approach which worked:

  • cloned the bootstrap repo
  • modified _custom.scss in this directory.
  • ran npm install
  • ran grunt dist as is in documentation
  • copied generated bootstrap css and js files from here in my index.html

so my index.html has following:

<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script href="/static/bootstrap.js"></script>

As of now, I don't think customising is possible when using CDN link of bootstrap.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.