解决vue-cli中stylus无法使用的问题方法

下面是完整的“解决vue-cli中stylus无法使用的问题方法”的攻略。

问题描述

在使用vue-cli创建Vue项目的过程中，通过命令行工具安装完stylus插件后，却无法使用stylus的语法。

原因分析

vue-cli默认并未安装stylus插件，因此如果要在Vue项目中使用stylus，需要先通过npm或者yarn等包管理工具手动安装stylus插件。如果安装完插件仍无法使用stylus，可能是因为缺少一些必要依赖或者配置有误。

解决方法

下面介绍两种解决vue-cli中stylus无法使用的问题方法：

方法一：手动配置webpack

1. 安装stylus-loader和stylus

npm install stylus-loader stylus --save-dev

1. 手动配置webpack，在build文件夹下的webpack.base.conf.js文件中添加以下代码：

module: {
  rules: [
    // ...其他规则
    {
      test: /\.styl$/,
      use: ['style-loader', 'css-loader', 'stylus-loader']
    }
  ]
}

1. 重启项目，尝试使用stylus语法

方法二：使用vue-cli-plugin-stylus插件

1. 安装vue-cli-plugin-stylus插件

vue add stylus

1. 重启项目，尝试使用stylus语法

注意事项

在配置webpack中，要确保stylus-loader在css-loader之前执行，否则可能因为执行顺序问题出现错误。另外，使用vue-cli-plugin-stylus插件时，需要确认已经全局安装了vue-cli，否则会提示“vue命令不存在”的错误。

示例一：

当使用方法一时，配合.vue组件文件使用.

在.vue文件的