在前端開(kāi)發(fā)中，CSS 是一個(gè)重要的部分。它控制著網(wǎng)站的樣式和布局，讓頁(yè)面看起來(lái)更加美觀和易于使用。Vue.js 是一個(gè)流行的 JavaScript 框架，它提供了一種方便的方式來(lái)引入 CSS 和其他資源文件。在本文中，我們將介紹如何在 Vue 文件中引入 CSS。

使用 Vue.js 引入 CSS 主要有兩種方式 -import和require。在下面的示例中，我們將使用import導(dǎo)入 CSS 文件。

<template>
<div class="my-div">
<p>Hello Vue.js</p>
</div>
</template>
<script>
import './my-styles.css';
export default {
name: 'MyComponent'
}
</script>
<style>
.my-div {
background-color: #eee;
padding: 20px;
}
p {
color: blue;
}
</style>

在上面的示例中，我們使用import語(yǔ)句來(lái)導(dǎo)入my-styles.css文件。Vue.js 會(huì)在組件加載時(shí)自動(dòng)添加這個(gè) CSS 文件。

現(xiàn)在，如果你打開(kāi)瀏覽器并查看頁(yè)面，你會(huì)看到背景顏色變?yōu)榈疑温湮谋咀優(yōu)樗{(lán)色。

另一種方式是使用require語(yǔ)句。這種方法通常用于在 Vue.js 項(xiàng)目中加載第三方庫(kù)或插件的 CSS 文件。下面的示例展示了如何使用require導(dǎo)入 CSS 文件：

<script>
const thirdparty = require('./thirdparty.css');
export default {
name: 'MyComponent',
mounted() {
thirdparty.use();
}
}
</script>

在上面的示例中，我們使用require語(yǔ)句來(lái)加載第三方 CSS 文件，并在組件加載后調(diào)用use()方法來(lái)使用它。

使用這兩種方式中的任何一種，你都可以很容易地在 Vue.js 項(xiàng)目中引入 CSS 文件并使用它們來(lái)更改組件的樣式。