Webpack aliases break with Vue Style Modules

Noticed an issue in a few of my Jest test after we switched to using css modules.

Without modules using an alias for my SCSS file works fine:

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

  ...
</style>

Adding 'module' to the style tag cause the import to break:

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

  ...
</style>

Error Message: [vue-jest]: Error while compiling styles: Error: File to import not found or unreadable: root-dir/src/components/@design

(The actual path should be root-dir/src/design)

Here is my jest config:

{
  "setupFiles": ["/Users/tam/Repos/signal-client/tests/unit/setup"],
  "setupTestFrameworkScriptFile": "/Users/tam/Repos/signal-client/tests/unit/matchers",
  "transform": {
    "^.+\\.js$": "babel-jest",
    "^.+\\.vue$": "vue-jest",
    // stub out static assets
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/unit/__mocks__/fileMock.js"
  },
  "transformIgnorePatterns": ["/node_modules/(?!(@storybook/.*\\.vue$))"],
  "moduleFileExtensions": ["vue", "js", "jsx", "json", "node"],
  "moduleNameMapper": {
    "^@src/(.*)$": "<rootDir>/src/$1",
    "^@api/(.*)$": "<rootDir>/src/api/$1",
    "^@design/(.*)$": "<rootDir>/src/design/index.scss/$1",
    "^@components/(.*)$": "<rootDir>/src/components/$1",
    "^@router/(.*)$": "<rootDir>/src/router/$1",
    "^@views/(.*)$": "<rootDir>/src/router/views/$1",
    "^@layouts/(.*)$": "<rootDir>/src/router/layouts/$1",
    "^@assets/(.*)$": "<rootDir>/src/assets/$1",
    "^@fonts/(.*)$": "<rootDir>/src/design/fonts.scss/$1"
  },
  "snapshotSerializers": ["jest-serializer-vue"],
  "testMatch": ["**/(*.)unit.js", "**/storyshot.test.js"],
  "testURL": "http://localhost/",
  "globals": {
    "vue-jest": {
      // Disable CSS compilation until it's more stable
      "experimentalCSSCompile": "false"
    }
  }
}

vuejs / vue-jest

Webpack aliases break with Vue Style Modules #99