用style-resources-loader自动注入scss样式时
vue.config.js配置如图:
在styles中scss公共样式如图
最后在组件中@include hoverShadow; 引入运行时报错:
ERROR in ./src/views/home/HomePage.vue?vue&type=style&index=0&id=923d6e98&lang=scss&scoped=true (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/home/HomePage.vue?vue&type=style&index=0&id=923d6e98&lang=scss&scoped=true)
**Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.**
╷
4 │ @include hoverShadow;
│ ^^^^^^^^^^^^^^^^^^^^
╵
src\views\home\HomePage.vue 4:3 root stylesheet
╵
src\views\home\HomePage.vue 4:3 root stylesheet
@ ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./s ╵
src\views\home\HomePage.vue 4:3 root stylesheet
@ ./node_modules/vue-style-loader/index.js??clonedRuleSet-22.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/home/HomePage.vue?vue&type=style&index=0&id=923d6e98&lang=scss&scoped=true 4:14-436 15:3-20:5 16:22-444
@ ./src/views/home/HomePage.vue?vue&type=style&index=0&id=923d6e98&lang=scss&scoped=true 1:0-500 1:0-500
@ ./src/views/home/HomePage.vue 5:0-80
@ ./src/router/index.js 7:21-56
@ ./src/main.js 3:0-30 5:30-36
webpack compiled with 1 error
Why?and How?
这万恶的sass-loader……