4

I'm having a problem when unit testing a vue single file component with some scss styling, as it is unable to process the @import statements. It works when I run launch the app using yarn run dev or build for production yarn run build, issue is only with unit test mode, and my setup uses mochapack to run the webpack before executing the test.

 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';

Any ideas on how may this be resolved. I don't need to load scss for testing, although I'm unable to disable style processing (null-loader) as I do not have a webpack.config file in the project, and I would not create one unless absolutely necessary. Project is generated with Vue CLI.

BuddhiP
  • 6,231
  • 5
  • 36
  • 56
  • Making your path relative: `../themes/default/variables` (or `../../themes...`, if it's two levels above) should work (for both cases: app and tests). – tao Apr 20 '20 at 18:57
  • 1
    Thank you @tao but it doesn't, tried with relative, absolute paths, none of that works! – BuddhiP Apr 20 '20 at 19:12
  • 1
    Having same issue. – Daniel Angel May 04 '20 at 23:17
  • @DanielAngel I was able to fix this by prefixing the path with '~@/...', give it a try and see. Example: "@import: '~@/styles/variables'; " – BuddhiP May 05 '20 at 11:49

1 Answers1

1

I was able to fix this by prefixing the path with '~@/...', give it a try and see. Example: "@import: '~@/styles/variables'; "

BuddhiP
  • 6,231
  • 5
  • 36
  • 56