在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回答
同学你好, 需要在配置文件中设置下assets这个文件,例:可参考如下;另,注意:配置文件修改之后,需要重新启动下项目。
如果还有问题,可以将你的项目目录截图粘贴过来,便于老师帮助同学准确的定位与解决问题。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
相似问题
回答 1
回答 2