Vue中使用stylus报错的解决

更新时间：2022年08月02日 08:56:51 作者：csdn_zhoushengnan

如果你也和我一样，按照正常的流程下载并且配置了stylus，但是依旧报错，也许这篇文章就是你的菜，一起来看看吧

一、正常配置stylus流程

1.安装stylus、stylus-loader依赖(进入项目文件夹下)

cnpm install stylus stylus-loader

2.package.json文件配置(手动添加依赖)

"devDependencies": {
    ...
    "stylus": "^0.54.8",
    "stylus-loader": "^3.0.2",

    ...
      },

3.在build >webpack.base.conf.js中配置存放styl文件夹别名

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'src': resolve('src'),
      '@': resolve('src'),
      'common':resolve('src/common')
    }
  },
common :别名
'src/common' :存放styl文件夹

4我的stylus文件夹结构如下图所示：

5. 在main.js文件中引入index.styl文件

6. 执行npm run dev启动，报错

查遍了网上所有的解答无非就是上面几个步骤？那问题到底出在哪里了呢？

二、解决bug

查看stylus和stylus-loader的版本，均为当前最新版本

我卸载掉当前stylus和stylus-loader，重新安装了以前的版本

重新npm run dev，成功启动

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue
stylus

Vue.js高效前端开发
Vue是构建Web界面的JavaScript库，原称为Vue.js，它可以通过简洁的API来提供高效的数据绑定和灵活的组件系统，本文详细介绍了Vue的使用安装和相关知识，有兴趣的同学可以参考借鉴
2023-03-03
vite项目配置less全局样式的实现步骤
最近想实现个项目,需要配置全局less,本文主要介绍了vite项目配置less全局样式的实现步骤,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
2024-02-02
使用vue实现手写签名功能
这篇文章主要介绍了使用vue实现手写签名功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-07-07
vue如何截取字符串
这篇文章主要介绍了vue如何截取字符串，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
从0搭建vue-cli4脚手架
这篇文章主要介绍了从0搭建vue-cli4脚手架，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-06-06
Vue自定义Form组件实现方法介绍
这篇文章主要介绍了Vue自定义Form组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-10-10
vue $nextTick实现原理深入详解
这篇文章主要介绍了vue $nextTick实现原理深入详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
vue3+vite:src使用require动态导入图片报错的最新解决方法
这篇文章主要介绍了vue3+vite:src使用require动态导入图片报错和解决方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
vue2.0路由切换后页面滚动位置不变BUG的解决方法
下面小编就为大家分享一篇vue2.0路由切换后页面滚动位置不变BUG的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue3使用vue-router如何实现路由跳转与参数获取
这篇文章主要介绍了Vue3使用vue-router如何实现路由跳转与参数获取，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03