The introduction of boostrap.css by main.js in vue-cli3 does not take effect, and the css style cannot be displayed in paging.

npm run dev compilation did not report an error

import css style in main.js

import "bootstrap/dist/css/bootstrap.min.css"

use

in components
   

Jul.01,2021

this is not valid. This may be the reason why jQuery does not add dependencies or paths. I recommend a convenient way. Please introduce:

in index.html .
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <link href="/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <script src="/jquery.min.js"></script>
  <script src="/bootstrap.min.js"></script>
</html>

the root directory can be queried. If you want to introduce it in main , recommends that you reference it by adding dependencies


Hello, landlord! First confirm what version of bootstrap you installed? If it is 3.x , you have no problem with this. However, if the installation is the latest 4.x, then the structure and style of the paging html are changed, as follows:

  

you must first determine whether the style of bootstrap is imported and installed. Whether the introduction can be seen in the console. Then determine the problem

Menu