如何在Vue.js 3项目中全局引入Bootstrap 4及外部CSS、SCSS文件？

Hey there! I’ve helped plenty of folks migrate existing styles to Vue 3, so let’s walk through how to get your SCSS/CSS files and Bootstrap 4 set up globally without a hitch.

Step 1: Set Up Bootstrap 4 First #

First, make sure Bootstrap 4 and its required dependencies are installed (Bootstrap 4 relies on jQuery and Popper.js for interactive components like modals or dropdowns):

npm install bootstrap@4 jquery popper.js --save

You have two straightforward options to include Bootstrap globally:

Option A: Import Bootstrap directly in main.js #

This is the simplest approach if you want all Bootstrap styles and JS available everywhere in your app:

import { createApp } from 'vue'
import App from './App.vue'

// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css'
// Import Bootstrap JS (skip this if you don't need interactive Bootstrap components)
import 'bootstrap/dist/js/bootstrap.min.js'

createApp(App).mount('#app')

Note: If your existing main.css folder already contains bootstrap.min.css, skip importing the package version to avoid duplicate style loading.

Option B: Import Bootstrap via your SCSS file #

If you prefer to bundle Bootstrap with your custom SCSS, add this line to your style.scss:

@import "~bootstrap/scss/bootstrap";

The ~ tells the build tool to look in your node_modules folder for the Bootstrap SCSS source files.

Step 2: Globally Import Your Custom SCSS/CSS Files #

First, organize your existing files into Vue’s standard directory structure—move all files from your main.css and main.scss folders into src/assets/styles (create this folder if it doesn’t exist). This keeps your project clean and easy to maintain.

Option 1: Import files directly in main.js #

This works for both CSS and SCSS files, ensuring they load globally for every component:

import { createApp } from 'vue'
import App from './App.vue'

// Import Bootstrap (if you didn't do it in Step 1)
import 'bootstrap/dist/css/bootstrap.min.css'

// Import your custom CSS files
import './assets/styles/font.css'
import './assets/styles/responsive.css'
import './assets/styles/style.css'

// Import your SCSS files (if style.scss already imports _responsive.scss, no need to import it separately)
import './assets/styles/style.scss'

createApp(App).mount('#app')

Option 2: Inject SCSS partials globally (for variables/mixins) #

If your _responsive.scss contains SCSS variables, mixins, or utilities that you want to use in every component without importing it every time, configure your build tool:

For Vue CLI projects (vue.config.js):

Create or update vue.config.js in your project root:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // Inject _responsive.scss into every component's SCSS
        additionalData: `@import "@/assets/styles/_responsive.scss";`
      }
    }
  }
}

For Vite projects (vite.config.js):

Update your vite.config.js with this configuration:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/styles/_responsive.scss";`
      }
    }
  }
})

Key Notes to Avoid Issues #

• Double-check file paths: In Vue, @ is an alias for the src directory, so make sure your import paths match where you placed your files.
• Avoid duplicate styles: If you imported Bootstrap via the npm package, don’t also import the bootstrap.min.css from your main.css folder—this will load the same styles twice and cause unnecessary bloat or conflicts.
• Leverage SCSS hierarchy: If your style.scss already imports _responsive.scss, you don’t need to import _responsive.scss separately in main.js or your build config.

内容的提问来源于stack exchange，提问作者user3718511