Tips for adjusting the order in which styles load in NuxtJS

I need to adjust the loading order of styles in my current project.

In my custom stylesheet style.css, I've made some overrides,

body {
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 25px;
    position: relative;
    visibility: visible;
    color: #3d3d3d;
    background-color: #FFFFFF;
}

Additionally, I'm using bootstrapVue in the project via a plugin,

import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
Vue.use(BootstrapVue);
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

Since I only utilize a portion of the overridden styles, I'd like to let bootstrap handle the rest.

Unfortunately, upon project execution, I notice that the bootstrap style takes precedence over mine,

_reboot.scss :

body { 
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}

style.css - disabled (I dont know how to show that the text is crossed out, without loading a picture)
body {
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 25px;
    position: relative;
    visibility: visible;
    color: #3d3d3d;
    background-color: #FFFFFF;
}

How can this be resolved without explicitly specifying styles in the <style> section within /pages/layout.vue?

javascriptcssvue.jsbootstrap-vue

Answer №1

Utilizing Bootstrap Vue's Nuxt module eliminates the need to create a custom plugin. By leveraging this module, you have the option to prevent automatic importing of Bootstrap Vue styles, allowing you to import and override styles directly in your style.css file before adding your own customizations. Alternatively, you can opt to import the SCSS versions and customize using SCSS variables. If you prefer to use a custom plugin, simply remove the CSS imports from the plugin and incorporate them into your style.css as demonstrated below.

/* style.css */

@import '../node_modules/bootstrap/dist/bootstrap.css';
@import '../node_modules/vue-bootstrap/dist/bootstrap-vue.css';

body {
  ...
}

// nuxt.config.js

export default {
  modules: ['bootstrap-vue/nuxt'],
  bootstrapVue: {
    bootstrapCSS: false,
    bootstrapVueCSS: false
  }
}

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

Sending slot-generated inputs from vue to the root vue instance

Can I transfer the value of input fields generated by a slot to the root vue instance? Consider my blade code: <template slot="update"> <td> <div> <input :value="name" type="text"/> </d ...

vuejs2vue.js

What are some ways to avoid sorting parameters in AngularJS when making a GET request using $resource?

My resource is: angular.module('myApp.services') .factory('MyResource', ['$resource', function ($resource) { return $resource('http://example.org', {}, {}); }]); How I send a GET request: MyResourc ...

javascriptangularjsngresource

Challenge with the submission event listener

I am struggling to create my first event listener for the submit button that should respond to both a click and an enter key press. Currently, it is not working for either event, and I am unsure why. I do not intend to send any data to another page; I simp ...

javascriptsubmitaddeventlistener

Ways to verify the presence of an element in a list

I found this interesting JS code snippet: ;(function ($) { $('.filter-opts .opt').click(function(){ var selectedName = $(this).html(); $('.append').append('<li>' + selectedName + '</li> ...

javascriptjqueryhtmlcss

The validity of the return statement in the ajax code is malfunctioning

Currently, I am in the process of validating duplicate email addresses from a database. Initially, I validate the email format, then check the email length and finally verify the email with the database using ajax. However, the return true or return false ...

phpjavascriptajax

There is a space separating the slider image and the navigation bar

Having a small space between the slider image and the navigation bar is causing some issues. I've tried various solutions like minifying the code, adjusting margins, and setting line heights to zero but nothing seems to be working. One question I have ...

htmlcss

Utilize a single image to encompass the entire background/theme

As a beginner, I am eager to learn how to use html and css. I understand the importance of being able to style an entire webpage in order to prevent issues like page overload or cache problems. Are there any easy-to-understand examples available for begi ...

htmlcss

The function nuxtServerInit does not have access to authentication cookies

I am facing an issue with the nuxtServerInit function where it sometimes fails to receive all users' browser data, including cookies related to the auth module (specifically JWT Bearer token). async nuxtServerInit(store, { req }) { console.log(re ...

vue.jsauthenticationcookiesnuxt.jsnuxtserverinit

Assistance needed for iterating through JSON data

I need assistance retrieving specific data from a JSON response in my JavaScript code. Unfortunately, the current approach is not providing the desired results: This is my JavaScript code snippet: function retrieveArtists(response){ var artistList ...

javascriptjson

What is the best way to dynamically show the accurate credit card badge according to the provided credit card number through the v-model?

Currently, I am implementing vee-validate and v-mask on an input field. <ValidationProvider name="Credit Card Number" rules="required" mode="eager" ...

regexvue.jsnuxt.jsvee-validate

Learn how to effortlessly retrieve shared properties using Vue3 in Single File Components with the new `<script setup>` syntax

There are various ways to extract common props in Vue components, depending on whether you are using Vue 2 or Vue 3. However, when it comes to Single File Components (SFC), the approach differs. // common-props.js export default { commonProps: { enab ...

vue.jsvuejs3vue-sfc

Top strategies for efficiently managing the loading of extensive PHP pages using Jquery, Ajax, HTML, and other tools

Hey there, I hope you're doing well in this new year. I've been working on a project that creates a "league table" using a large amount of data, similar to those seen in sports like football. The backend is built in PHP to process the data and d ...

javascriptphpjqueryhtmlajax

Infinite Vue.js Scrolling: Elevate Your Web

Do you know of any directive that can be used to implement Ajax infinite scroll with vue.js? Or is there a directive already available for this purpose? Your assistance would be highly appreciated. ...

jqueryvue.js

What could be the reason for the Checkbox's value not showing up after making changes?

In my React and Material UI project, I am facing an issue where I want to check all checkboxes in a list by simply checking one checkbox in a parent component. Despite passing down the correct value of the parent checkbox through props, the visual changes ...

javascriptreactjsmaterial-ui

How to implement datepicker on multiple input fields

Below are the two input fields that have datepicker functionality: <div class="row"> <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22&apos ...

javascriptjqueryangularjs

Stop the Text Table from being highlighted

My webpage includes a dynamic table where users can select multiple rows. jQuery events and CSS are utilized to provide visual feedback when a row is selected. However, pressing the shift key sometimes causes text to become highlighted, which is not idea ...

javascriptjqueryhtml

Automating the movement of a slider input gradually throughout a specified duration

I am working on a website that includes a range input setup like this: <input type="range" min="1036000000000" max="1510462800000" value="0" class="slider" id ="slider"/> Additionally, I have integrated some D3 code for visualizations. You can view ...

javascriptjquerycssd3.jsuser-input

Disposing of memory in THREE JS when switching between routes in VUE

Currently, I am delving into the world of VUE JS and working on a basic SPA that navigates through different pages. In my spare time, I have developed several THREE JS demos which unfortunately tend to slow down and eventually halt when switching between ...

javascriptmemory-leaksthree.jsvue.js

What could be causing the d3.js pie chart transition to malfunction?

Today I am experimenting with d3.js to create a unique pie chart from scratch. While following tutorials here as my base, there were modifications made in the code to add personal touches and customization. The challenge arose during Step 6 when introduc ...

javascriptpythond3.jscharts

Received a function instead of an array when passing it into a Vue.js component

I'm encountering an issue where I am trying to pass a function into my component and receiving an error message stating: "Invalid prop: type check failed for prop 'form_type'. Expected Array, got Function." The function in question, named se ...

vue.jsvue-component