Description
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)