今天下午逛博客时偶然发现一个博主写的很好的上一步和下一步的页面的实现效果，用的vue2，所以我便自己搭建了vue2的项目试了一下，结果出现了
These dependencies were not found:
- !!vue-style-loader!css-loader?{“sourceMap”:true}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-469af010”,“scoped”:true,“hasInlineConfig”:false}!sass-loader?{“sourceMap”:true}!../…/node_modules/vue-loader/lib/selector?type=styles&index=0!./HelloWorld.vue in ./src/components/HelloWorld.vue
- !!vue-style-loader!css-loader?{“sourceMap”:true}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-6eea9872”,“scoped”:true,“hasInlineConfig”:false}!sass-loader?{“sourceMap”:true}!../…/node_modules/vue-loader/lib/selector?type=styles&index=0!./steps.vue in ./src/components/steps.vue
To install them, you can run: npm install --save !!vue-style-loader!css-loader?{“sourceMap”:true}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-469af010”,“scoped”:true,“hasInlineConfig”:false}!sass-loader?{“sourceMap”:true}!../…/node_modules/vue-loader/lib/selector?type=styles&index=0!./HelloWorld.vue !!vue-style-loader!css-loader?{“sourceMap”:true}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-6eea9872”,“scoped”:true,“hasInlineConfig”:false}!sass-loader?{“sourceMap”:true}!../…/node_modules/vue-loader/lib/selector?type=styles&index=0!./steps.vue
这么个问题，我一直以为是我的vue-style-loader!css-loader的版本问题，但实际不是。我用文心一言去查找解决办法，告诉我要升级webpack最新版本，升级了也不好用，于是查找了csdn，发现是缺少sass- loader ,于是又开始下载sass- loader，试了多个版本，终于解决。发现vue2项目的webpack的loader 版本兼容性问题真令人头大。
记录一下解决问题的博客 https://blog.youkuaiyun.com/genius_yym/article/details/82222424
解决方案
此类问题一般是缺少相关依赖而导致的，对于本例，仔细看一下报错提示信息，抓住关键词，vue-style-loader!css-loader，说明是css解析的时候出了问题。
所以，解决方案就要根据情况而定，看你使用的CSS语言是什么,是 常规的 或者 less 或者 sass。
如果是 常规 的，执行 npm install stylus-loader css-loader style-loader --save-dev 安装依赖就行。
如果是 less 的，执行 npm install less less-loader --save-dev 安装依赖就行。
如果是 sass 的，执行 npm install sass sass-loader --save-dev 安装依赖就行。或者（$npm intall sass-loader --save ; $npm install node-sass --save）
记录一下我用的package.json文件吧，适用于vue2项目的。
{
"name": "vue2-test",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "SSSophia <zj1006574506@163.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"element-ui": "^2.15.14",
"sass": "^1.79.3",
"sass-loader": "^16.0.2",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.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.11",
"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",
"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": "^7.3.1",
"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.1.2",
"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"
]
}
好在我发现的这段代码真的很不错，就是找不到出处了。
子组件
<template>
<div class="steps-box">
<div
v-for="(item, index) in stepsData"
class="steps-card"
:class="index <= stepsIndex ? 'on' : ''"
:key="index">
<span>{{ index + 1 }}</span>
<span>{{ item.name }}</span>
</div>
</div>
</template>
<script>
export default {
name: "steps",
data: function () {
return {
stepsIndex: "",
stepsData: [],
};
},
created() {
this.stepsIndex = this.$parent.stepsIndex;
this.stepsData = this.$parent.stepsData;
},
methods: {
//下一步
stepsFun() {
this.stepsIndex = this.$parent.stepsIndex;
},
},
};
</script>
<style lang="scss" scoped>
/* steps-box*/
.steps-box {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30px;
margin-top: 200px;
.steps-card {
width: 300px;
cursor: pointer;
display: flex;
align-items: center;
color: rgba(0, 0, 0, 0.25);
position: relative;
span:nth-of-type(1) {
display: inline-block;
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 50%;
margin-right: 10px;
i {
font-style: normal;
}
}
}
.steps-card:before {
width: 194px;
height: 1px;
content: "";
background: #e9e9e9;
margin: 0 15px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
.steps-card:last-of-type {
width: auto;
}
.steps-card:last-of-type:before {
width: 0;
}
.steps-card.on {
display: flex;
align-items: center;
color: rgba(0, 0, 0, 0.85);
span:nth-of-type(1) {
display: inline-block;
width: 26px;
height: 26px;
text-align: center;
line-height: 26px;
background: #1d73f6;
border: 1px solid #1d73f6;
color: #fff;
border-radius: 50%;
margin-right: 10px;
}
}
.steps-card.on:before {
background: #1d73f6;
}
}
</style>
父组件
<template>
<div>
<div class="addTask">
<!--步骤条-->
<steps ref="stepsChild"></steps>
<!--内容区域-->
<div class="task-main-box">
<div v-if="stepsIndex == 0" class="task-con-box"><h1>第一步</h1></div>
<div v-if="stepsIndex == 1" class="task-con-box"><h1>第二步</h1></div>
<div v-if="stepsIndex == 2" class="task-con-box"><h1>第三步</h1></div>
<div v-if="stepsIndex == 3" class="task-con-box"><h1>第四步</h1></div>
</div>
<!--操作按钮-->
<div class="button-box">
<div v-if="stepsIndex == 0">取消</div>
<div v-if="stepsIndex == 3">完成</div>
<div @click="prevSteps" v-if="stepsIndex != 0">上一步</div>
<div @click="nextSteps" v-if="stepsIndex != 3">下一步</div>
</div>
</div>
</div>
</template>
<script>
import steps from "./steps.vue";
export default {
name: "addTask",
data() {
return {
//新建任务
stepsIndex: 0,
stepsData: [
{ name: "第一步" },
{ name: "第二步" },
{ name: "第三步" },
{ name: "第四步" },
],
};
},
methods: {
//返回数据采集页面
goback() {
this.$parent.addTask = false;
},
//下一步
prevSteps() {
this.stepsIndex--;
this.$refs.stepsChild.stepsFun();
},
nextSteps() {
this.stepsIndex++;
this.$refs.stepsChild.stepsFun();
},
},
components: {
steps,
},
};
</script>
<style lang="scss" scoped>
.addTask {
width: 100%;
height: 100%;
overflow: hidden;
.task-main-box {
width: 100%;
height: calc(100% - 45vh);
.task-con-box {
width: 100%;
height: 100%;
}
}
.button-box {
display: flex;
justify-content: center;
div {
padding: 10px;
background: #2f86ff;
margin: 10px;
border-radius: 4px;
cursor: pointer;
color: #ffffff;
}
}
}
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
