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字）