我在使用一些 scss 样式对 vue 单文件组件进行单元测试时遇到问题,因为它无法处理 @import 语句。当我使用 yarn run dev
运行启动应用程序时,它会起作用或为生产而构建 yarn run build
,问题仅在于单元测试模式,我的设置使用 mochapack
在执行测试之前运行 webpack。
WEBPACK Compiling...
[=========================] 98% (after emitting)
ERROR Failed to compile with 1 errors
error in ./src/components/WorkTrigger.vue?vue&type=style&index=0&lang=scss&
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
1 │ @import 'themes/default/variables';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
home/xxxxx/src/styles/main.scss 1:9 @import
/home/xxxxx/src/components/WorkTrigger.vue 39:9 root stylesheet
@ ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/WorkTrigger.vue?vue&type=style&index=0&lang=scss& 4:14-442
@ ./src/components/WorkTrigger.vue?vue&type=style&index=0&lang=scss&
@ ./src/components/WorkTrigger.vue
@ ./tests/unit/WorkTrigger.spec.ts
@ ./node_modules/mochapack/lib/entry.js
Type checking in progress...
[=========================] 100% (completed)
WEBPACK Failed to compile with 1 error(s)
Error in ./src/components/WorkTrigger.vue?vue&type=style&index=0&lang=scss&
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
1 │ @import 'themes/default/variables';
关于如何解决这个问题的任何想法。我不需要加载 scss 进行测试,尽管我无法禁用样式处理(空加载器),因为我在项目中没有 webpack.config 文件,除非绝对必要,否则我不会创建一个。项目是使用 Vue CLI 生成的。
最佳答案
我能够通过在路径前加上“~@/...”来解决这个问题,试试看。示例:"@import: '~@/styles/variables';"
关于vue.js - Vue scss 样式加载失败,mocamapck,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61329697/