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

使用 Vue.js 引入 CSS 主要有兩種方式 -import和require。在下面的示例中，我們將使用import導入 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語句來導入my-styles.css文件。Vue.js 會在組件加載時自動添加這個 CSS 文件。

現在，如果你打開瀏覽器并查看頁面，你會看到背景顏色變為淡灰色，段落文本變為藍色。

另一種方式是使用require語句。這種方法通常用于在 Vue.js 項目中加載第三方庫或插件的 CSS 文件。下面的示例展示了如何使用require導入 CSS 文件：

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

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

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