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

来源:

阮萍

2016-12-25

错误如下:

http://szimg.mukewang.com/585fd2830001d5ee11310725.jpg

http://szimg.mukewang.com/585fd56c000154ab11520810.jpg

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

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

http://szimg.mukewang.com/585fd35200015b7909620190.jpg

我的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');


写回答

2回答

ustbhuangyi

2016-12-26

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

0
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))就出错了
2016-12-26
共1条回复

慕粉1471684696

2017-05-16

怎么解决的  求解


0
0

Vue.js2.5+cube-ui重构饿了么App(经典再升级)

掌握Vue1.0到2.0再到2.5最全版本应用与迭代,打造极致流畅的WebApp

9868 学习 · 4162 问题

查看课程