Global sass mixins/vars are undefined on test mode

[eard7]

Version

3.4.1

Reproduction link

https://github.com/eard7/test-sass-error

Environment info

  System:
    OS: Linux 4.19 CentOS Linux 7 (Core)
    CPU: (6) x64 Intel(R) Core(TM) i5-8600K CPU @ 3.60GHz
  Binaries:
    Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
    Yarn: Not Found
    npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 60.4.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.3 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.3 
    @vue/babel-preset-app:  3.5.1 
    @vue/babel-preset-jsx:  1.0.0-beta.3 
    @vue/babel-sugar-functional-vue:  1.0.0-beta.3 
    @vue/babel-sugar-inject-h:  1.0.0-beta.3 
    @vue/babel-sugar-v-model:  1.0.0-beta.3 
    @vue/babel-sugar-v-on:  1.0.0-beta.3 
    @vue/cli-overlay:  3.5.1 
    @vue/cli-plugin-babel: ^3.5.0 => 3.5.1 
    @vue/cli-plugin-eslint: ^3.5.0 => 3.5.1 
    @vue/cli-plugin-unit-mocha: ^3.5.0 => 3.5.1 
    @vue/cli-service: ^3.5.0 => 3.5.1 
    @vue/cli-shared-utils:  3.5.1 
    @vue/component-compiler-utils:  2.6.0 
    @vue/eslint-config-standard: ^4.0.0 => 4.0.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.2 
    vue: ^2.6.6 => 2.6.10 
    vue-eslint-parser:  2.0.3 
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.21 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.0.1 => 3.1.0 
  npmGlobalPackages:
    @vue/cli: 3.4.1

Steps to reproduce

1.- Create a new project or pull the minimal reproduction repo (and npm install)
2.- Add scss mixins or variables as globals
3.- Add a Demo component and use any of the mixins you added (It doesn't matter if its on a separate scss file or inside the style tags in the vue file)
4.- Create a unit test for your Demo component
4.- Run npm run serve and in a separate terminal tab run npm run test

What is expected?

When running the serve command, the application should pull your sass mixing properly. Also you should be able to run the tests properly

What is actually happening?

Run the serve command works and you can see the application is pulling the mixin properly, but running the tests leads to an error that prevent the tests completion.

 Module build failed (from ./node_modules/sass-loader/lib/loader.js):
  Undefined mixin.
      @include header;

---

This setup is using sass (dart sass), but a similar issue happens using node-sass. Seems like if the test mode is using a different configuration. In fact in the vue.config.js file a workaround is needed to be able to load global sass mixins/vars in test mode (you can see that workaround on the minimal reproduction repo)

[christophehenry]

edit: I opened #4053 because it seems to be a different issue.

[rajendrapathi]

I'm also facing the same type of issue Please find the issue below

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined mixin. ╷ 430 │ ┌ @include media-breakpoint-only(sm) { 431 │ │ display: none; 432 │ └ }

[rajendrapathi]

I found solution here... https://www.dev-tips-and-tricks.com/use-bootstrap-4-media-query-mixins

[MKraust]

For anyone who was looking for an answer like me, I've found a solution of this problem. https://qiita.com/mascii/items/6fd5333b65931b55d38b

You need to insert this code into jest.config.js

module.exports = {
  // ...
  globals: {
    'vue-jest': {
      experimentalCSSCompile: false,
    },
  },
};