Unlocking Bootstrap variables in Vue development (using Vanilla Bootstrap)

What is the best way to customize or theme bootstrap? I have heard that using sass to override bootstrap variables is recommended, but how can I integrate this into the Vue webpack workflow?

I tried searching online and found suggestions to edit the vue.config.js file to add scss loader to webpack. However, I cannot locate the required file.

Here is my directory structure for reference

The project was set up using vue-cli v3.4 and I am working with vanilla bootstrap, not the bootstrap-vue components.

javascriptvue.jswebpack

Answer №1

To begin customizing your Bootstrap styles, create a new file named custom.scss. Navigate to the node_modules/bootstrap/scss directory and duplicate everything found in _variables.scss. Paste this content into your newly created custom.scss.

Next, within your style.scss, make sure to import your custom.scss before importing the standard bootstrap.scss file.

Lastly, in your main.js, don't forget to import @/assets/style.scss to ensure all your customizations are included.

Remember, if you want to override any variables in your custom.scss, be sure to remove the !default flag for those specific variables to take effect properly.

Answer №2

To begin, establish a new file named /css/bootstrap-custom.scss and input the following code:

// your custom variable overrides
// update theme colors map
$theme-colors: (
    "primary":#42b883,
    //...additional variables can be found in node_modules/bootstrap/scss/_variables.scss
);

// bring in to apply changes
@import "~bootstrap/scss/bootstrap";

In the main script, switch out the current imported bootstrap css file with the newly added file:

// import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '@/css/bootstrap-custom.scss';

Further details can be found here: Bootstrap, Variable defaults

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Successfully running npm update on a Mac seemed to have updated the package, however, the

I needed to upgrade my npm version using the following command: npm install npm@latest -g After running the above command, I encountered the following output: /Users/ariful.haque/.npm-global/bin/npm -> /Users/ariful.haque/.npm-global/lib/node_modules ...

javascriptnode.jsnpm

Manipulating variables in the main controller scope from a function in a transcluded directive scope using AngularJS

How can parent controller scope variables be updated from a transcluded directive scope's function? I have a situation where I am including directives within another directive using transclusion. Here is an example of how it is set up: <my-table& ...

javascriptangularjstransclusionangularjs-ng-transclude

What is the best method to delete an attribute from an element using Angular?

When working with Angular, how can I remove an attribute or its value? For example, say I have an ng-click event that I only want to fire once. One approach could be to create a 'self-destruct' in the ng-click event like this: elementClicked = f ...

javascriptangularjseventsdom-eventsself-destruction

If the condition is false, the Bootstrap 4 carousel will not transition to another slide

With Bootstrap 4, each slide contains a form section and there is a next button. I want to ensure that the carousel does not move to the next slide unless a certain variable is true (for form validation purposes). I have attempted using the onclick event ...

javascriptjquerybootstrap-4carousel

It is impossible for Javascript to access an input element within a gridview

I have developed an asp.net page that allows a site administrator to select a user as the 'systems chair'. The page displays users in a gridview and includes a column of radio buttons to indicate who the current chair is or to change the assigned ...

javascriptjqueryasp.net

Building a static website with the help of Express and making use of a public directory

It seems that I am facing a misunderstanding on how to solve this issue, and despite my efforts in finding an answer, the problem persists. In one of my static sites, the file structure is as follows: --node_modules --index.html --server.js --app.js The ...

javascriptangularjsnode.jsexpress

Steps for updating a specific item within an object in an array of MongoDB document

Consider the following data collection, for which I have some questions: { "_id" : ObjectId("4faaba123412d654fe83hg876"), "user_id" : 123456, "total" : 100, "items" : [ { ...

javascriptnode.jsmongodbexpressmongoose

A guide on incorporating LINQ in the Microsoft ClearScript V8 platform

Currently, I am making use of microsoft.clearscript.v8 in ASP.Net Core MVC. The following code snippet can be found in my Home controller: public async Task<IActionResult> Index() { using (var engine1 = new V8ScriptEngine()) { engine1 ...

javascriptasp.netasp.net-mvcasp.net-corev8

The synchronization feature of HighCharts fails to function properly if the charts being used have varying widths

When using HighCharts, I experimented with Synchronized multiple charts following the example in this Fiddle. It worked seamlessly when all the charts had equal width. $('#container').bind('mousemove touchmove touchstart', function (e) ...

javascriptchartshighcharts

Is it not possible to make updates while the state is already in transition?

this.state = { filterData: [{ attribute: '-1', filter: '-1', value: '' }], } _createFilterUI(dataSourceColumns) { if (this.state.dataSourceIndex == -1) return <div > Kindly first select Data Sourc ...

javascriptarraysreactjsreact-redux

What is the best way to apply "display: none;" on a span element nested within a title attribute?

I am utilizing the social-share-button gem to share blog posts on social media. The website has been internationalized, making it bilingual (English and German). Everything is functioning correctly, but I encounter an issue with the social share buttons wh ...

javascripthtmlcssruby-on-rails

Activate Input by Clicking on Label in Internet Explorer version 8

I am trying to implement a widget in JQuery colorbox that allows users to load files. My approach involves using an input tag with type='file' and styling it with visibility:hidden. Additionally, I have created two labels that are styled like but ...

javascriptjqueryhtmlcssinternet-explorer-8

Instead of presenting MySQL data in tables on an HTML page, showcase it in editable text boxes

I have successfully imported data from my database table into an HTML table, but now I want to display them in locked text boxes. When the user clicks an "edit" button, the corresponding text box should become unlocked so that they can edit the data and sa ...

javascriptphphtmlcsscontenteditable

How can one continue repeating a series in async.js until an unforeseen error arises?

Is it possible to continuously execute a series of tasks in async.js until an unexpected error occurs? For example: async.series([ function(callback) { // perform task }, function(callback) { // perform another task }, ...

javascriptnode.jsasync.js

Utilizing the scrollTop method to display the number of pixels scrolled on

My goal is to show the number of pixels a user has scrolled on my website using the scrollTop method in jQuery. I want this number of pixels to be displayed within a 'pixels' class. Therefore, I plan to have <p><span class="pixels"> ...

phpjavascriptjqueryhtml

How can I run a TypeScript function within a JavaScript file?

I am working with a typescript file named file1.ts export function Hello(str: string) { console.log(str); } In addition, I have another file called index.js { require('./some.js'); } Furthermore, there is a script defined in the pack ...

javascripttypescriptecmascript-6

The Socket.io application is facing deployment issues on the Heroku platform

I have developed a simple chat server using nodejs, socket.io, and express, and now I am attempting to deploy it on Heroku using my Git repository. However, when I access the Herokuapp website for my application (), the display is not as expected: https:/ ...

javascriptnode.jsexpressherokusocket.io

What is the process for using AJAX and PHP to upload an image file?

I'm facing an issue where I want to insert an uploaded image into a database with user details for a profile picture. The output I receive currently shows {"current_field":null,"field_count":null,"lengths":null,"num_rows":null,"type":null}. How can th ...

javascriptphphtmlajax

Possible solutions for AngularJS using ng- tags

I absolutely love incorporating AngularJs into my Multiple Pages Laravel Application. However, using the Laravel Blade Template Engine has made me reconsider adding Angular Tags to clutter my blade templates. For instance <div ng-controller="TodoCont ...

javascriptphpangularjslaravellaravel-blade

vue implementing vuelidate for obligatory server fields

After retrieving the list of required fields from the server, I aim to transfer this list into the validations function. data() { return { fieldsFromServer: {}, requiredFields: {}, } }, created() { dataAPI.getFormData() .then(r ...

vue.jsvuelidate