在 Vue.js 中引入 CSS 文件有多種方式,以下是其中幾種常見(jiàn)的方法:
1. 全局引入:在項(xiàng)目的入口文件(通常是 `main.js`)中,使用 `import` 語(yǔ)句引入 CSS 文件。
```javascript
import '@/assets/css/style.css';
```
2. 組件內(nèi)引入:在 Vue 組件的 `style` 標(biāo)簽中,使用 `@import` 引入其他 CSS 文件。
```vue
```
3. 使用預(yù)處理器:如果你使用 Sass、Less 等預(yù)處理器,可以在組件的 `style` 標(biāo)簽中直接引入其他組件的樣式。
```vue
```
4. 動(dòng)態(tài)引入:使用 Vue 的動(dòng)態(tài)組件或路由,可以在組件加載時(shí)動(dòng)態(tài)引入 CSS 文件。
```javascript
const Component = Vue.extend({
data() {
return {
cssLoaded: false,
};
},
created() {
if (!this.cssLoaded) {
import('@/assets/css/style.css').then(style => {
this.cssLoaded = true;
});
}
},
});
```
5. 使用樣式塊:在 Vue 組件的 `template` 中使用 `