为什么style-resources-loader 引入scss时报错呢?

新手上路,请多包涵

用style-resources-loader自动注入scss样式时
vue.config.js配置如图:
image.png

在styles中scss公共样式如图
image.png

最后在组件中@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……

阅读 1.7k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进