5-6 1像素border实现小结中，在main.js中引入index.styl时，控制台报错，求解决

Question

错误如下:

message中提及的stylus模块被安装的原因是原先的stylus-loader安装失败，并提示需要安装stylus。

message中提及发生错误的位置如下：

我的common/stylus/index.styl的代码如下：

@import "./mixin"
@import "./icon"
@import "./base"

其中 common/stylus/mixin.styl的代码如下

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

其中 common/stylus/base.styl的代码如下

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
	.border-1px
		&::after
			-webkit-transform: scaleY(0.7)
			transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
	.border-1px
		&::after
			-webkit-transform: scaleY(0.5)
			transform: scaleY(0.5)	

main.js的代码如下

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App';
import goods from './components/goods/goods.vue';
import ratings from './components/ratings/ratings.vue';
import seller from './components/seller/seller.vue';

import 'common/stylus/index.styl';

Vue.use(VueRouter);

let app = Vue.extend(App);

let router = new VueRouter({
	linkActiveClass: 'active'
});

router.map({
	'/goods': {
		component: goods
	},
	'/ratings': {
		component: ratings
	},
	'/seller': {
		component: seller
	}
});

router.start(app, '#app');

router.go('/goods');

Answer 1

ustbhuangyi 2016-12-26 00:54:57

从提示来看是 stylus 的语法问题，建议仔细检查，一键自动格式化代码~

• 提问者 阮萍 #1

  我已经找到错误的原因了，因为在index.styl中引入了mixin.styl并且main.js中引入了index.js， 我就把APP.vue的style标签里面的@import "common/stylus/mixin.styl"这个代码删除了，所以在style标签中使用border-1px(rgba(7, 17, 27, 0.1))就出错了

Answer 2

慕粉1471684696 2017-05-16 13:55:20

怎么解决的  求解