<h2 id="heading-overview">Overview</h2>
<p>This guide outlines how to customize Bootstrap variables in a Vue.js project using Vue CLI's built-in Webpack setup.</p>
<h2 id="heading-steps">Steps</h2>
<h3 id="heading-1-install-sass-loader-and-sass">1. Install Sass Loader and Sass</h3>
<p>If you haven't already, you'll need to install <code>sass-loader</code> and <code>sass</code>.</p>
<pre><code class="lang-bash">npm install sass-loader sass --save-dev
</code></pre>
<h3 id="heading-2-create-custom-scss-file">2. Create Custom SCSS File</h3>
<p>Create your <code>custom-bootstrap.scss</code> file in your project's <code>src/assets</code> or <code>src/styles</code> directory (or wherever you prefer to keep your styles).</p>
<pre><code class="lang-scss"><span class="hljs-comment">// custom-bootstrap.scss</span>

<span class="hljs-comment">// Override Bootstrap variables</span>
<span class="hljs-variable">$primary</span>: <span class="hljs-number">#007bff</span>;
<span class="hljs-variable">$secondary</span>: <span class="hljs-number">#6c757d</span>;

<span class="hljs-comment">// Import Bootstrap</span>
<span class="hljs-keyword">@import</span> <span class="hljs-string">'~bootstrap/scss/bootstrap'</span>;
</code></pre>
<h3 id="heading-3-import-custom-scss-in-mainjs-or-maints">3. Import Custom SCSS in Main.js or Main.ts</h3>
<p>In your <code>main.js</code> or <code>main.ts</code> file, import the custom SCSS file.</p>
<pre><code class="lang-javascript"><span class="hljs-comment">// main.js or main.ts</span>

<span class="hljs-keyword">import</span> <span class="hljs-string">'./assets/custom-bootstrap.scss'</span>;
</code></pre>
<h3 id="heading-4-run-your-development-server">4. Run Your Development Server</h3>
<p>Now, run your development server using <code>npm run serve</code> or <code>yarn serve</code>. The custom SCSS should be compiled and included automatically.</p>


## 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`.

```bash
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).

```scss
// 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.

```javascript
// 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.

Customizing Bootstrap in Vue.js

Overview

Steps

1. Install Sass Loader and Sass

2. Create Custom SCSS File

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

4. Run Your Development Server