vue饿了么学习-问题1（style文件报错）

最新推荐文章于 2024-01-08 10:27:10 发布

阿允殿下

最新推荐文章于 2024-01-08 10:27:10 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_21036015/article/details/77898854

本文介绍了解决在Vue项目中使用Stylus混入(mixin)时遇到的导入错误的方法。通过调整<style>标签的lang属性，并简化Stylus语法格式，成功解决了依赖未找到及模块构建失败的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在src-common-的styles中写入的mixin.styl文件，

border-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color

2.在App.vue中的<style></style>引入上面写的文件，

@import './common/styles/mixin.styl';

3.运行文件的时候，报以下错误

This dependency was not found:

* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-rewriter?{"id":"data-v-6c96342b","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./navs.vue in ./src/components/navs.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-rewriter?{"id":"data-v-6c96342b","scoped":false,"hasInlineConfig":false}!stylus-loader?{"sourceMap":false}!../../node_modules/vue-loader/lib/selector?type=styles&index=0!./navs.vue

（重新安装一次stylus：npm install stylus-loader css-loader style-loader --save-dev）

4.安装好以后，再运行一次项目，还是报错：

./~/.0.28.7@css-loader?{"minimize":false,"sourceMap":false}!./~/.13.0.4@vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-13330d4d","scoped":false,"hasInlineConfig":false}!./~/.4.0.5@less-loader/dist/cjs.js?{"sourceMap":false}!./~/.13.0.4@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed:

// load the styles
var content = require("!!../../../node_modules/.0.28.7@css-loader/index.js??ref--12-1!../../../node_modules/.3.0.1@stylus-loader/index.js??ref--12-2!./mixin.styl");
^
Unrecognised input
in E:\imoc\src\common\styles\mixin.styl (line 4, column 12)
@ ./~/.3.0.1@vue-style-loader!./~/.0.28.7@css-loader?{"minimize":false,"sourceMap":false}!./~/.13.0.4@vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-13330d4d","scoped":false,"hasInlineConfig":false}!./~/.4.0.5@less-loader/dist/cjs.js?{"sourceMap":false}!./~/.13.0.4@vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-409 13:3-17:5 14:22-417
@ ./src/App.vue
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

（解决方法：把<style>标签中的 lang='less'，修改成 lang='stylus'，并且去掉样式的所有分号和大括号，如下：）

<style  lang="stylus">
  @import './common/styles/mixin.styl';
  #app
    .tab
      display: flex
      width:100%
      height:80px
      line-height: 80px
      /*border-1px(rgba(7,17,27,0.1))*/
      .tab-item
        flex-grow:1
        text-align: center
        font-size:28px
        color: #4d555d
        line-height:28px
        border-bottom:2px solid rgba(7,17,27,0.1)
      .active
        color: #f01414
</style>