Vue Enterprise Boilerplate: sass-loader unable to load from updated .scss files

Question

I'm rewriting an existing project using the latest vue enterprise boilerplate. I haven't been able to find any examples of the use of vue enterprise boilerplate so I'm doing trial and error. When using some of the existing code with large <style> blocks I'm running into compile problems importing from .scss files which are all in the directory src/design/. This code

<style lang="scss" module>
@import '@design';

.container {
  @extend %relative-block;
...

throws this error

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: The target selector was not found.
Use "@extend %relative-block !optional" to avoid this error.
   ╷
86 │   @extend %relative-block;
   │   ^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  /home/dean/src/vue/examples/rewrite.0/src/components/nav-bar.vue 86:3  root stylesheet

The relative-block exists in the design/_positioning.scss file and Intellij is able to find it

%relative-block {
  position: relative;
  display: block;
}

I also get errors when using sass @mixins:

@include lq-size(100%, 100%);

gives

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
50 │   @include lq-size(100%, 100%);
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  /home/dean/src/vue/examples/rewrite.0/src/app.vue 50:3  root stylesheet

The @mixin lq-size exists and Intellij finds it in design/_mixins.css:

@mixin lq-size($width, $height) {
  width: $width;
  height: $height;
}

These errors occur for code in new .scss files that I've added to the src/design/ directory, and for new code in existing .scss files.

I'm new to sass and scss. When I update a .scss file of add a new .scss file into the src/design/ folder do I have to tell the sass-loader to look for updated .scss files?