【Vue3】更方便的样式管理方法：全局引入样式

必要性

• 方便多个组件使用同一个样式，便于管理
• 一次性全局引入，不需要再在每个组件文件里面操心引入的事
• 设计基准样式如_base.scss）和每个页面各自的独特样式（如content.scss），有助于良好的代码风格管理

步骤

确定样式存放的位置：

写作App.scss文件

一般这个文件里面要包括所有要引入的样式文件，且要注意和其他样式文件的目录关系

@import

'normalize',
'misc',
'sprite',
'shake',
'base',


'components/header',
'components/footer',
'components/content',
'components/login',
'components/details';

在main,js里面全局引入

import { createApp } from 'vue';
import App from './App.vue'
import router from './index.js'
import '@/assets/sass/app.scss'//引入的位置是这里

// Create the Vue app instance
const app = createApp(App);

// Use the router
app.use(router);

// Mount the app
app.mount('#app');

注意事项

• '@'默认代表vue项目的src文件夹，具体配置可以在vue.config.js里面配，于此不再详述
• 注意样式冲突问题：样式冲突：前端组件无法正常显示的debug思路-CSDN博客