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

Issue with the functionality of socket.io callback functions

Previously, I used to utilize the socket.io emit callback in the following manner: On the client side: mysocket.emit('helloworld', 'helloworld', function(param){ console.log(param); }); On the server side: var server = r ...

javascriptangularjsnode.jssocketscallback

Is activating the CSP policy preventing the JavaScript on the front end from transmitting cookies and the referrer header?

Upon removing the CSP policy from the backend in Node.js, everything functions correctly. However, enabling it results in a break in the JavaScript code. To investigate further, I analyzed the request headers of the AJAX requests made by my JS files. Two ...

javascriptnode.jscontent-security-policy

Issues with retrieving data from Firestore and storing it into an array in a React

Struggling to fetch data from my firestore and display it on the webpage. Despite trying all possible solutions and searching extensively, I am unable to get it working. When using the code below, nothing appears on the website. However, if I switch to th ...

javascripthtmlreactjsfirebasegoogle-cloud-firestore

I aim to trigger a Redux action utilizing react-router-dom

In light of a route adjustment, I am in search of an improved method for invoking the redux action. One option is to invoke a redux action through the render function, as shown below: render(){ const filterName = this.props.match.params.product this.p ...

javascriptreactjsreact-reduxreact-router-dom

What is the method for displaying a div adjacent to a password input field?

I am attempting to display a password verification box next to an input field. The current logic is functioning properly, but the box containing all password requirements is not appearing in the correct position. Instead of being positioned adjacent to the ...

javascriptjqueryhtmlcsstwitter-bootstrap

Problem with HTML relative paths when linking script sources

Having trouble with a website I constructed using Angular. The problem lies in the references to javascript files in index.html. The issue is that the paths in the HTML are relative to the file, but the browser is searching for the files in the root direct ...

javascripthtml

Customizing the appearance of the browser's autocomplete feature as we input information into the form field

The image illustrates the issue of the background turning white when the browser autofills. However, I am seeking a solution similar to the transparent input below. ...

cssinputbackground

Exploring the keyof operator in Typescript for object types

Is there a way to extract keys of type A and transfer them to type B? Even though I anticipate type B to be "x", it seems to also include "undefined". Why does the keyof operator incorporate undefined in the resulting type? It's perplexing. I kn ...

javascripttypescripttypescript-generics

Updating comment content using Ajax

I am in the process of using Ajax to insert my comment content. However, I seem to be facing some issues with the comment_add.php page. I was hoping someone could review it for me. While I have successfully obtained the streamid as checked in firebug, no ...

phpjavascriptjqueryhtmlajax

Experiencing issues with connecting to jQuery in an external JavaScript file

My jQuery formatting in the HTML file looks like this: <!doctype html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script> </head> < ...

javascripthtmljquery

Having a collection of JSON objects, I am unable to remove an element using the pop() method in JavaScript

Hello everyone, I have a collection of JSON objects that are initially set to null in the program like this: var jsonToSaveToDB = [ { ProductID: null, Quantity: null, TotalPrice: null } ]; As the pr ...

javascriptarraysjson

The dropdown navigation bar fails to close upon being clicked

I'm currently facing an issue with the navbar in my project. The bootstrap navbar doesn't close automatically after clicking on a link. I have to move my mouse away from the navbar for it to close, which is not ideal. Additionally, I'm worki ...

htmlcsstypescript

What are the benefits of implementing a hexadecimal strategy in javascript?

I have a somewhat unusual question that has been puzzling me. I've noticed some interesting choices in naming variables in JavaScript, seemingly using what appears to be "a hexadecimal approach". For example, I see variables named like _0x2f8b, _0xcb6 ...

javascriptnode.jsoopdesign-patternshex

Here's a unique version: "Strategies for effectively closing a modal when moving to a

I'm currently working with react-router-dom and material UI modal, and I am looking for a way to automatically hide the modal whenever the user navigates to another page. Here is my App component: const App = () => ( <BrowserRouter> &l ...

javascriptreactjsmaterial-ui

React Material Table - issue with data filtering accuracy

Currently in my React project, I am utilizing Material Table. While everything appears to be rendering correctly, the filtering and searching functionalities are not working as expected. To provide more context, below is a sample of the code: ht ...

javascriptreactjsmaterial-uimaterial-designmaterial-table

Parsing JSON data in JavaScript with multiple objects

I just received a JSON Object from an HTTP request [ { "location": { "name": "Seattle, WA", "lat": "47.604", "long": "-122.329", "timezone": "-7", "alert": "", "degreetype": "F", "imagerelativeurl": "http:&b ...

javascriptjson

Vue router is unable to render or mount the component at the root path

I am currently working on a webpage using vue, vue-router, and laravel. I have encountered an issue where the Home component is not being rendered in the router-view when I access localhost/myproject/public_html/. However, if I click on the router link to ...

javascriptvue.jsvue-router

The average duration for each API request is consistently recorded at 21 seconds

It's taking 21 seconds per request for snippet.json and images, causing my widget to load in 42 seconds consistently. That just doesn't seem right. Check out this code snippet below: <script type="text/javascript"> function fetchJSONFil ...

javascriptruby-on-railsjsonapiheroku

Reactivating a React hook following the execution of a function or within a function in ReactJS

A new react hooks function has been created to retrieve data from an API and display it on the page: function useJobs () { const [jobs, setJobs] = React.useState([]) const [locations, setLocations] = React.useState({}) const [departments, setDepartm ...

javascriptreactjsfunctionreact-hooks

Switch from Index.html to Index.html#section1

Currently, I am working on a website and sending someone a draft for review. However, the Home screen is designed as a 'a href' link with "#home". The issue arises when the website opens from my computer; it goes to ...../Index.html instead of .. ...

javascriptjqueryhtmlcss