vue配置全局样式文件

1、在入口main.js文件中引入

import './assets/main.css'

2、在根组件App.vue中引入

<style>
@import './assets/main.css'
</style>

1
2
3

3、在index.html中引入，或者在index.html中写样式需要注意css文件放置路径

// 引入文件
<link ref="styleet" href="/static/main.css">

<style>
  .content {
  }
</style>

1
2
3
4
5
6
7

4、在vue.config.js中配置

css: {
  loaderOptions: {
    sass: {
      // 全局sass
      additionalData: `@import "@/styles/global.scss";`
    }
  }
},

1
2
3
4
5
6
7
8

上次更新: 2025/09/05, 8:09:00