在tabbar组件使用import mixins时出错,只要进行引入就会进行报错

来源:3-2 Tabbar 组件

慕用0863198

2019-12-24 20:07:55

tabbar的代码

<template>
   <div class="g-tabbar">
     <router-link class="g-tabbar-item" to="/home">
       <i class="iconfont icon-home"></i>
       <span>首页</span>
     </router-link>
     <router-link class="g-tabbar-item" to="/category">
       <i class="iconfont icon-category"></i>
       <span>分类页</span>
     </router-link>
     <router-link class="g-tabbar-item" to="/cart">
       <i class="iconfont icon-cart"></i>
       <span>购物车</span>
     </router-link>
     <router-link class="g-tabbar-item" to="/personal">
       <i class="iconfont icon-personal"></i>
       <span>个人中心</span>
     </router-link>
   </div>
</template>

<script>
   export default {
       name: "CTabbar"
   }
</script>

<style lang="scss" scoped>

 @import  "~assets/scss/mixins";
 .router-link-active {
   color:$link-active-color;
 }
</style>


package.json的代码

{
 "name": "mall",
 "version": "1.0.0",
 "description": "在线商城WebApp",
 "author": "Alex",
 "private": true,
 "scripts": {
   "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
   "start": "npm run dev",
   "lint": "eslint --ext .js,.vue src",
   "build": "node build/build.js"
 },
 "dependencies": {
   "axios": "^0.18.1",
   "babel-polyfill": "^6.26.0",
   "fastclick": "^1.0.6",
   "jsonp": "^0.2.1",
   "vue": "^2.5.2",
   "vue-awesome-swiper": "^3.1.3",
   "vue-lazyload": "^1.2.2",
   "vue-router": "^3.0.1"
 },
 "devDependencies": {
   "autoprefixer": "^7.1.2",
   "babel-core": "^6.22.1",
   "babel-eslint": "^8.2.1",
   "babel-helper-vue-jsx-merge-props": "^2.0.3",
   "babel-loader": "^7.1.1",
   "babel-plugin-syntax-jsx": "^6.18.0",
   "babel-plugin-transform-runtime": "^6.22.0",
   "babel-plugin-transform-vue-jsx": "^3.5.0",
   "babel-preset-env": "^1.3.2",
   "babel-preset-stage-2": "^6.22.0",
   "chalk": "^2.0.1",
   "copy-webpack-plugin": "^4.0.1",
   "css-loader": "^0.28.0",
   "eslint": "^4.15.0",
   "eslint-config-standard": "^10.2.1",
   "eslint-friendly-formatter": "^3.0.0",
   "eslint-loader": "^1.7.1",
   "eslint-plugin-import": "^2.7.0",
   "eslint-plugin-node": "^5.2.0",
   "eslint-plugin-promise": "^3.4.0",
   "eslint-plugin-standard": "^3.0.1",
   "eslint-plugin-vue": "^4.0.0",
   "extract-text-webpack-plugin": "^3.0.0",
   "file-loader": "^1.1.4",
   "friendly-errors-webpack-plugin": "^1.6.1",
   "html-webpack-plugin": "^2.30.1",
   "node-notifier": "^5.1.2",
   "node-sass": "^4.8.3",
   "optimize-css-assets-webpack-plugin": "^3.2.0",
   "ora": "^1.2.0",
   "portfinder": "^1.0.13",
   "postcss-import": "^11.0.0",
   "postcss-loader": "^2.0.8",
   "postcss-url": "^7.2.1",
   "rimraf": "^2.6.0",
   "sass-loader": "^6.0.7",
   "semver": "^5.3.0",
   "shelljs": "^0.7.6",
   "uglifyjs-webpack-plugin": "^1.1.1",
   "url-loader": "^0.5.8",
   "vue-loader": "^13.3.0",
   "vue-style-loader": "^3.0.1",
   "vue-template-compiler": "^2.5.2",
   "webpack": "^3.6.0",
   "webpack-bundle-analyzer": "^2.9.0",
   "webpack-dev-server": "^2.9.1",
   "webpack-merge": "^4.1.0"
 },
 "engines": {
   "node": ">= 6.0.0",
   "npm": ">= 3.0.0"
 },
 "browserslist": [
   "> 1%",
   "last 2 versions",
   "not ie <= 8"
 ]
}

sass-loader从8.0.换到6.0.7了,之前使用8.0版本会一直报错。

但是这里这个地方还是会报错,不知道为什么,

下面为报错信息

Module build failed:                                                            undefined                                                                       ^                                                                                     File to import not found or unreadable: ~assets/scss/mixins.                    in E:\0 to 1\netmall\src\components\tabbar\index.vue (line 30, column 1)                                                                                   @ ./node_modules/_vue-style-loader@3.1.2@vue-style-loader!./node_modules/_css-loader@0.28.11@css-loader?{"sourceMap":true}!./node_modules/_vue-loader@13.7.3@vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-72b83f71","scoped":true,"hasInlineConfig":false}!./node_modules/_sass-loader@6.0.7@sass-loader/lib/loader.js?{"sourceMap":true}!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=styles&index=0!./src/components/tabbar/index.vue 4:14-461 13:3-17:5 14:22-469                                                                             @ ./src/components/tabbar/index.vue                                             @ ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/App.vue            @ ./src/App.vue                                                                 @ ./src/main.js                                                                 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js                                                                                                                                                                                        

 

   


写回答

1回答

好帮手慕慕子

2019-12-25

同学你好, 需要在配置文件中设置下assets这个文件,例:可参考如下;另,注意:配置文件修改之后,需要重新启动下项目。

http://img.mukewang.com/climg/5e02c26b099f994015040440.jpg

如果还有问题,可以将你的项目目录截图粘贴过来,便于老师帮助同学准确的定位与解决问题。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 3299 问题

查看课程