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.安裝好以後,再執行一次專案,還是報錯:
./~/[email protected]?{"minimize":false,"sourceMap":false}!./~/[email protected]/lib/style-compiler?{"vue":true,"id":"data-v-13330d4d","scoped":false,"hasInlineConfig":false}!./~/[email protected]/dist/cjs.js?{"sourceMap":false}!./~/[email protected]/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed:
// load the styles
var content = require("!!../../../node_modules/[email protected]/index.js??ref--12-1!../../../node_modules/[email protected]/index.js??ref--12-2!./mixin.styl");
^
Unrecognised input
in E:\imoc\src\common\styles\mixin.styl (line 4, column 12)
@ ./~/[email protected]!./~/[email protected]?{"minimize":false,"sourceMap":false}!./~/[email protected]/lib/style-compiler?{"vue":true,"id":"data-v-13330d4d","scoped":false,"hasInlineConfig":false}!./~/[email protected]/dist/cjs.js?{"sourceMap":false}!./~/[email protected]/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>
相關推薦
vue餓了麼學習-問題1(style檔案報錯)
1.在src-common-的styles中寫入的mixin.styl檔案, border-1px($color) position: relative &:after display: block position: absolute left: 0 bot
vue餓了麼學習筆記(4)icon字型載入問題,提示 These relative modules were not found: ./font/sell-icon.eot...
https://blog.csdn.net/qq_22317389/article/details/79601407 https://blog.csdn.net/mxf_bear/article/details/80505295 使用 icon 字型圖標出現小方塊問題
vue餓了麼學習-第四篇(web字型)
1.字型庫網站:icomoon 2.在官網點選右上角icomoon app按鈕, 新頁面找到import ICONS點選, 選擇自己所有的svg檔案確定上傳, 選中新增的全部小圖示, 然後點選右下角的crate font, 跳轉到新頁面以後,每一個圖示下面都會出
vue2.0 餓了麼學習筆記(14)food.vue的實現
點選food展開詳情頁food.vue的實現1)新建good資料夾和good.vue,設定樣式,並接受一個被選中的food props: { //接收傳入的food food: { type: Object }
vue餓了麼學習-第十篇(配置路由)
1.在build檔案下,開啟dev-server.js檔案,新增引入express檔案,並使用它。 var express = require('express') var app = express() 已經將data.json資料,引入到了這裡,如下 //9.
vue餓了嗎學習筆記(一)配置mock資料的Router
vue餓了嗎學習筆記(一) 最近在學習慕課網的vue.js高仿餓了麼外賣APP,在專案準備時就遇到了webpack版本問題。視訊中使用的webpack是1.12.2,而現在的webpack 版本已經到了3.6,原先的程式碼已經不適用了。 言歸正傳,當我們想
vue 餓了麼學習筆記
詳情頁主要程式碼 <template> <transition name="move"> <div v-show="showFlag" class="food" ref="food"> <div clas
VUE2.0 餓了麼學習筆記(10)加減號元件cartcontrol
建立cartcontrol元件,元件關聯到food的相關屬性,價格,數量等,所以元件要props父元件goods傳過來的food資料 export default { //父元件傳過來的,接收一個props屬性來計算商品的個數,food.count,去goods元件
VUE 餓了麼元件 1.4 table 屬性之一
<el-table :data="Data.list" style="width: 100%" tooltip-effect="light"> 程式碼中有二點介紹 :data 繫結的資料是 VUE 的 data.list 模板樣式風格是淺色系的。 tooltip
vue餓了麼(三)--goods元件 & shopcart元件
1.goods.vue滾動實現:"better-scroll" 1.package.json中引入"better-scroll"。cnpm install --------》 npm run dev "dependencies": { "axios
vue餓了麼(二)--Sticky footer & start星星元件 & flex浮懸窗小標題
1.Sticky footer佈局 1.何為Sticky footer佈局:不管內容區有多少內容,頁尾始終顯示在螢幕的最下方,當內容區域超過螢幕的高度時。頁尾會始終顯示在頁面的最底部。 <!DOCTYPE html> <html lang="en"> <head
vue餓了麼(一)--vue-router路由 & mock後臺資料
1.vue-router:點選導航按鈕顯示相應頁面 1.router/index.vue import Vue from 'vue' import Router from 'vue-router' import header from '@/components/header/header'
vue餓了麼(四)--cartcontrol元件 & 減號新增滾動動畫transition
1.cartcontrol結構 <template> <div class="cartcontrol"> <transition name="move"> <div class="cart-decrease" v-sho
餓了麼學習(一)基礎介紹
餓了麼學習(一) 專案準備 專案構建 安裝vue腳手架 npm install -g vue-cli 專案初始化 vue init webpack <專案名> 其他略:webpack配置需單獨記錄學習 stylus 本
餓了麼學習(六)shopcart購物車小球動畫
HTML程式碼 生成一個動畫小球的div,並且生成五個小球,五個是為了生成一定數量的小球來作為操作使用,按照小球動畫的速度,一般來說五個也可以保證有足夠的小球數量來執行動畫 動畫的內容分別是外層和內層,外層控制動畫小球的軌道和方向,內層控制動畫小球的執行狀態
Vue2.x實戰餓了麼專案筆記(一)
mack資料 如果後端介面尚未開發完成,前端開發一般使用mock資料。 注意:新版的vue-cli 自動搭建的build 檔案裡沒有dev-server.js 和 dev-client.js ,因此我們要在webpack.dev.conf.js 裡配置 複製data.json 到sr
vue餓了麼--筆記
1.vue-router:點選導航按鈕顯示相應頁面 1.router/index.vue import Vue from 'vue' import Router from 'vue-router' import header from '@/components/head
爬蟲餓了麼app心得!!!!(charles的unknow中的亂碼)
(ps:這是一篇小白貼,大神輕噴) ------工具 模擬器:夜神模擬器 抓包工具:charles -------注意事項 餓了麼app用的是https請求,是https,並且使用了ssl pinning技術,此技術是繫結證書,所以偽造的證書無法通過app的驗
vue餓了麼專案實現評論列表的篩選
正如大家買東西都習慣看評論,評論好就買,評論不好就遠離;所以評論對大家來說是很重要的,一個商品的評論往往數量挺多,所以評論列表的篩選這個功能也就需求大,在公司的專案中用的比較多。 問題是?如何來實現這個功能? 其實很簡單: 第一步: 先準備好資料按鈕,如程式碼所
VUE餓了麼樹形控制元件新增增刪改功能
轉自:https://segmentfault.com/a/1190000011574698#articleHeader2 element-ui樹形控制元件:地址 在原文件中有個案例是有新增和刪除功能,但是後來發現其修改的資料並不能直接影響到樹形資料,所以採用了 rende