引入varibles.styl文件报错

Question

请老师帮忙看看：

Module build failed: Error: /Users/Erica/Desktop/travel/src/pages/home/components/Header.vue:24:9
20| }
21|
22|
23|

failed to locate @import file …/…/…/assets/styles/varibles.styl

at CachedPathEvaluator.visitImport (/Users/Erica/Desktop/travel/node_modules/stylus-loader/lib/evaluator.js:157:21)
at CachedPathEvaluator.Visitor.visit (/Users/Erica/Desktop/travel/node_modules/stylus/lib/visitor/index.js:28:40)
at CachedPathEvaluator.Evaluator.visit (/Users/Erica/Desktop/travel/node_modules/stylus/lib/visitor/evaluator.js:160:18)
at CachedPathEvaluator.Evaluator.visitRoot (/Users/Erica/Desktop/travel/node_modules/stylus/lib/visitor/evaluator.js:707:27)
at CachedPathEvaluator.Visitor.visit (/Users/Erica/Desktop/travel/node_modules/stylus/lib/visitor/index.js:28:40)
at CachedPathEvaluator.Evaluator.visit (/Users/Erica/Desktop/travel/node_modules/stylus/lib/visitor/evaluator.js:160:18)
at CachedPathEvaluator.Evaluator.evaluate (/Users/Erica/Desktop/travel/node_modules/stylus/lib/visitor/evaluator.js:247:15)
at Renderer.render (/Users/Erica/Desktop/travel/node_modules/stylus/lib/renderer.js:86:26)
at /Users/Erica/Desktop/travel/node_modules/stylus-loader/index.js:167:12
at tryCatchReject (/Users/Erica/Desktop/travel/node_modules/when/lib/makePromise.js:840:30)
at runContinuation1 (/Users/Erica/Desktop/travel/node_modules/when/lib/makePromise.js:799:4)
at Fulfilled.when (/Users/Erica/Desktop/travel/node_modules/when/lib/makePromise.js:590:4)
at Pending.run (/Users/Erica/Desktop/travel/node_modules/when/lib/makePromise.js:481:13)
at Scheduler._drain (/Users/Erica/Desktop/travel/node_modules/when/lib/Scheduler.js:62:19)
at Scheduler.drain (/Users/Erica/Desktop/travel/node_modules/when/lib/Scheduler.js:27:9)
at processTicksAndRejections (internal/process/task_queues.js:75:11)

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{“sourceMap”:true}!./node_modules/vue-loader/lib/style-compiler?{“vue”:true,“id”:“data-v-5558831a”,“scoped”:true,“hasInlineConfig”:false}!./node_modules/stylus-loader?{“sourceMap”:true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/pages/home/components/Header.vue 4:14-394 13:3-17:5 14:22-402
@ ./src/pages/home/components/Header.vue
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/pages/home/home.vue
@ ./src/pages/home/home.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Answer 1

Dell 2020-01-19 00:21:32

Header.vue 的代码贴上来看一下

• 提问者 徐游方 #1

  老师好～跟着视频一个个敲出来的。。看了好几遍感觉没什么不一样，麻烦老师再帮忙看看，谢谢！
  
  <template>
  	<div class="header">
  		<div class="header-left">
  			<div class="iconfont back-icon">&#xe624;</div>
  		</div>
  		<div class="header-input">
  			<span class="iconfont">&#xe632;</span>
  			输入城市/景点/游玩主题
  		</div>
  		<div class="header-right">
  			城市
  			<span class="iconfont arrow-icon">&#xe6aa;</span>
  		</div>
  	</div>
  </template>
  
  <script>
  export default {
  	name: 'HomeHeader'
  }
  </script>
  
  <style lang="stylus" scoped>
  	@import '~styles/varibles.styl'
  	.header
  		display: flex
  		line-height: .86rem
  		background: $bgColor
  		color: #fff
  		.header-left
  			width: .64rem
  			float: left
  			.back-icon
  				text-align: center
  				font-size: .4rem
  		.header-input
  			flex: 1
  			height: .64rem
  			line-height: .64rem
  			margin-top: .12rem
  			margin-left: .2rem
  			padding-left: .2rem
  			background: #fff
  			border-radius: .1rem
  			color: #ccc
  		.header-right
  			width: 1.24rem
  			float: right
  			text-align: center
  			.arrow-icon
  				margin-left: -0.05rem
  				font-size: .3rem
  
  </style>

• Dell 回复 提问者 徐游方 #2

  十有八九是你的路径别名定义错了，直接写相对路径，不要用alias的语法试试

• qq_慕姐1006771 回复 提问者 徐游方 #3

  把@去掉就可以了

Answer 2

呀呀呀亚歌 2020-01-18 23:19:31

引入错误吧
@import 'xxxx.styl'