在index.html中导入css，但是如果你使用webpack，你可以直接在js主配置中导入样式表，你所有的组件都会得到css。
如果使用webpack将其添加到main.js工作，请参见以下注解：

import './assets/css/main.css';

我发现最好的方法是在assets文件夹中创建一个新文件，我创建为global.css，但您可以选择任何名称。然后，将此文件global.css导入main.js文件。

• 注意：如果您认为global.css变得非常大，那么您也可以使用此方法创建多个文件，然后只需导入main.js中的所有文件。*

@\资产\全局.css

/* move the buttons to the right */
.buttons-align-right {
  justify-content: flex-end;
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './routes'

Vue.config.productionTip = false

// Importing the global css file
import "@/assets/global.css"

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

在App.vue中，您可以添加style属性来声明CSS文件：

<style>
  @import './assets/css/global.css';
</style>

你也可以这样做：https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/
我的文件夹结构大致如下：

- src
   - assets
     - _global.scss
     - _colors.scss
     - _fonts.scss
     - _paragraphs
     - index.scss // <-- import all other scss files.

这也适用于普通的css。

据我所知，有两种方法可以做到这一点。

方法1

利用vue.config.js配置，还可以使用sass替换较少的配置：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        additionalData: `@import '@/style/common.less';`
      }
    }
  }
}

方法2

在.vue文件中，使样式如下所示：

<style lang="less">
@import (reference) "../../style/variables.less";
#app {
  background: @bgColor;
}
</style>

注意：(reference)标志用于使在variables.less中定义的变量生效。如果没有变量，@import "../../style/variables.less";就足够了。
作为参考，你也可以看看这个链接：
https://github.com/tjcchen/vue-practice/tree/master/multipage-app

1.创建一个新的css文件在你的assets文件夹例如：global.css
1.将“global.css”导入main.js

import '@/assets/main.css';

1.在根目录中创建vue.config.js文件
1.在src文件夹中创建一个styles文件夹，您可以在此处创建全局样式文件，例如base.scss
1.要使用scss，请安装两个依赖项

npm install node-loader sass-loader

1.在您的vue.config.js中粘贴以下代码

module.exports = {
    css: {
      loaderOptions: {
        sass: {
            additionalData: `@import "@/styles/base.scss";`
        }
      }
    }
  };

Sass发布了他们的新模块系统，你为什么不用@use和@forward呢？
我的方法是在vite中使用scss的最佳方法。使用defineConfig设置全局scss（颜色、混合），并在所有组件中重用，而无需导入

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/main.scss" as *;`,
      },
    },
  },

此处为：code sandbox