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

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>