Overview

This guide outlines how to customize Bootstrap variables in a Vue.js project using Vue CLI's built-in Webpack setup.

Steps

1. Install Sass Loader and Sass

If you haven't already, you'll need to install sass-loader and sass.

npm install sass-loader sass --save-dev

2. Create Custom SCSS File

Create your custom-bootstrap.scss file in your project's src/assets or src/styles directory (or wherever you prefer to keep your styles).

// custom-bootstrap.scss

// Override Bootstrap variables
$primary: #007bff;
$secondary: #6c757d;

// Import Bootstrap
@import '~bootstrap/scss/bootstrap';

3. Import Custom SCSS in Main.js or Main.ts

In your main.js or main.ts file, import the custom SCSS file.

// main.js or main.ts

import './assets/custom-bootstrap.scss';

4. Run Your Development Server

Now, run your development server using npm run serve or yarn serve. The custom SCSS should be compiled and included automatically.