Vue-CLI 中 Stylus 无法使用如何解决

在使用 Vue-CLI 构建 Vue.js 项目时，Stylus 是一种常用的 CSS 预处理器，它提供了更简洁、灵活的语法来编写样式。然而，有时在项目中引入 Stylus 时可能会遇到无法使用的问题。本文将介绍一些常见的原因及其解决方法，帮助你顺利在 Vue-CLI 项目中使用 Stylus。

1. 确保已安装 Stylus 依赖

首先，确保你已经正确安装了 Stylus 及其相关的依赖。在 Vue-CLI 项目中，通常需要安装 stylus 和 stylus-loader 这两个包。你可以通过以下命令来安装它们：

npm install stylus stylus-loader --save-dev

或者使用 Yarn：

yarn add stylus stylus-loader --dev

安装完成后，检查 package.json 文件，确保 stylus 和 stylus-loader 已经出现在 devDependencies 中。

2. 配置 vue.config.js

如果你使用的是 Vue-CLI 3 或更高版本，可能需要手动配置 vue.config.js 文件来支持 Stylus。在项目根目录下创建或编辑 vue.config.js 文件，添加以下内容：

module.exports = {
  css: {
    loaderOptions: {
      stylus: {
        // 这里可以添加全局的 Stylus 配置
      }
    }
  }
};

这个配置告诉 Vue-CLI 使用 stylus-loader 来处理 .styl 文件。

3. 检查文件扩展名

确保你在 Vue 单文件组件中正确使用了 .styl 或 .stylus 扩展名。例如：

<template>
  <div class="example">Hello, Stylus!</div>
</template>

<script>
export default {
  name: 'ExampleComponent'
}
</script>

<style lang="stylus">
.example
  color: red
  font-size: 20px
</style>

注意 <style> 标签中的 lang="stylus" 属性，它告诉 Vue 使用 Stylus 语法来解析样式。

4. 检查 Webpack 配置

如果你使用的是 Vue-CLI 2 或自定义了 Webpack 配置，可能需要手动添加 Stylus 相关的 loader 配置。在 webpack.config.js 中添加以下内容：

module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'stylus-loader'
        ]
      }
    ]
  }
};

5. 清理缓存并重新编译

有时，缓存问题可能导致 Stylus 无法正常工作。你可以尝试清理项目的缓存并重新编译：

npm run clean
npm run dev

或者使用 Yarn：

yarn clean
yarn dev

6. 检查版本兼容性

确保你使用的 stylus 和 stylus-loader 版本与 Vue-CLI 和 Webpack 版本兼容。有时，版本不兼容会导致无法正常使用 Stylus。你可以尝试升级或降级相关依赖的版本。

结论

通过以上步骤，你应该能够解决 Vue-CLI 中 Stylus 无法使用的问题。如果问题仍然存在，建议检查项目中的其他配置或依赖，确保没有冲突或遗漏。希望本文能帮助你顺利在 Vue-CLI 项目中使用 Stylus，享受其带来的便利和灵活性。