vue-cli中stylus無法使用怎么解決

# Vue-CLI中Stylus無法使用怎么解決

## 問題背景

在使用Vue-CLI創建的項目中集成Stylus預處理器時，開發者可能會遇到以下報錯：

Module parse failed: Unexpected character ‘@’

或

Cannot find module ‘stylus-loader’

這表明項目無法正確識別`.styl`文件或缺少必要的依賴。

---

## 解決方案

### 1. 安裝必要依賴

首先確保已安裝`stylus`和`stylus-loader`（注意版本兼容性）：
```bash
npm install stylus stylus-loader --save-dev
# 或
yarn add stylus stylus-loader -D

注意：Vue-CI 4.x+ 推薦使用以下版本組合：

> "stylus": "^0.54.8",
> "stylus-loader": "^3.0.2"
> ```

### 2. 檢查Webpack配置

在`vue.config.js`中添加loader配置（如存在）：
```js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('stylus')
      .test(/\.styl$/)
      .use('stylus-loader')
      .loader('stylus-loader')
  }
}

3. 驗證文件引用

在.vue文件中正確引用Stylus：

<style lang="stylus">
/* 確保不是 styl 而是 stylus */
body
  font-size 16px
</style>

常見問題排查

1. 版本沖突

• 升級@vue/cli-service到最新版
• 降級stylus-loader到3.x版本（4.x可能需要額外配置）

2. 緩存問題

嘗試清除加載器緩存：

npm cache clean --force
rm -rf node_modules
npm install

3. 文件擴展名錯誤

確保文件后綴為.styl而非.stylus

完整配置示例

vue.config.js完整配置參考：

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        preferPathResolver: 'webpack'
      }
    }
  }
}

總結

通過以上步驟，90%的Stylus集成問題可以得到解決。如仍存在問題，建議： 1. 檢查控制臺完整錯誤日志 2. 對比官方模板配置 3. 創建最小化復現項目進行測試 “`

（全文約520字）