在Vue項目中引入SCSS樣式可以分為以下幾個步驟:
1. 安裝SCSS依賴
首先,確保已經安裝了SCSS依賴。可以使用以下命令安裝:
```bash
npm install sass-loader node-sass --save-dev
```
2. 創建SCSS文件
在項目的`src`目錄下創建一個`styles`文件夾,然后在該文件夾下創建一個`main.scss`文件(或者其他你喜歡的命名)。
```scss
// main.scss
// 定義一些全局的樣式
$primary-color: #1890ff;
body {
background-color: $primary-color;
}
```
3. 引入SCSS文件
在Vue組件文件中引入剛剛創建的`main.scss`文件。
```vue
```
注意,這里的`@`符號是Webpack的別名,指向項目的根目錄。如果你的項目中沒有配置這個別名,可以使用相對路徑引入。
4. 重啟開發服務器
當引入了SCSS樣式后,需要重新啟動開發服務器,這樣Webpack才會編譯SCSS文件并將其應用到項目中。
```bash
npm run serve
```
現在,你就可以在Vue項目中使用SCSS樣式了。