Sass Loader and Vue CLI 4 not working well together in test mode

dugajean commented 4 years ago

Version

4.0.5

Environment info

Environment Info:

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
  Binaries:
    Node: 12.13.0 - C:\Program Files\nodejs\node.EXE     
    Yarn: 1.19.1 - ~\AppData\Local\Yarn\bin\yarn.CMD     
    npm: 6.12.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.19008.1.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  4.0.4
    @vue/babel-preset-jsx:  1.1.1
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.1.1
    @vue/babel-sugar-v-on:  1.1.0
    @vue/cli-overlay:  4.0.4
    @vue/cli-plugin-babel: ^4.0.4 => 4.0.4
    @vue/cli-plugin-eslint: ^4.0.4 => 4.0.4
    @vue/cli-plugin-router:  4.0.4
    @vue/cli-plugin-vuex:  4.0.4
    @vue/cli-service: ^4.0.4 => 4.0.4
    @vue/cli-shared-utils:  4.0.4
    @vue/component-compiler-utils:  3.0.0
    @vue/eslint-config-prettier: ^5.0.0 => 5.0.0
    @vue/eslint-config-standard: ^4.0.0 => 4.0.0
    @vue/preload-webpack-plugin:  1.1.1
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    bootstrap-vue: 2.0.0-rc.15 => 2.0.0-rc.15
    eslint-plugin-vue: ^5.2.2 => 5.2.3
    eslint-plugin-vue-i18n: ^0.2.3 => 0.2.3
    typescript:  3.6.4
    vue: ^2.6.6 => 2.6.10
    vue-autosuggest: ^2.0.2 => 2.0.4
    vue-awesome-swiper: ^3.1.3 => 3.1.3
    vue-chartjs: ^3.4.2 => 3.4.2
    vue-class-component:  7.1.0
    vue-clipboard2: ^0.3.0 => 0.3.1
    vue-eslint-parser:  2.0.3 (6.0.4, 5.0.0)
    vue-functional-data-merge:  2.0.7
    vue-headroom: ^0.9.0 => 0.9.0
    vue-hot-reload-api:  2.3.4
    vue-i18n: ^8.9.0 => 8.15.0
    vue-line-clamp: ^1.3.2 => 1.3.2
    vue-loader: ^15.7.0 => 15.7.1
    vue-loaders: ^3.0.2 => 3.0.2
    vue-perfect-scrollbar: ^0.1.0 => 0.1.0
    vue-property-decorator:  8.3.0
    vue-quill-editor: ^3.0.6 => 3.0.6
    vue-radial-progress: ^0.2.10 => 0.2.10
    vue-resize: ^0.4.5 => 0.4.5
    vue-router: ^3.0.1 => 3.1.3
    vue-scrollto: ^2.15.0 => 2.17.1
    vue-select: ^3.1.0 => 3.2.0
    vue-shortkey: ^3.1.6 => 3.1.7
    vue-simple-calendar: ^4.2.1 => 4.2.2
    vue-slider-component: ^3.0.40 => 3.0.41
    vue-style-loader:  4.1.2
    vue-switches: ^2.0.1 => 2.0.1
    vue-template-compiler: ^2.5.21 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
    vue-tour: ^1.1.0 => 1.1.0
    vue-yandex-maps: ^0.8.3 => 0.8.18
    vue2-dropzone: ^3.5.7 => 3.6.0
    vue2-google-maps: ^0.10.6 => 0.10.7
    vuedraggable: ^2.19.3 => 2.23.2
    vuelidate: ^0.7.4 => 0.7.4
    vuetable-2: ^1.7.5 => 1.7.5
    vuex: ^3.0.1 => 3.1.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Have a SCSS Vue project
Run cross-env NODE_ENV=test vue-cli-service serve --mode test
Explodes with SCSS errors

What is expected?

Should turn on the server with no issues

What is actually happening?

Blows up at SCSS variables that are actually there. Works fine with vue-cli-service serve

Recently upgraded to Vue CLI 4 and my Sass Loader isn't letting me serve my web app in test mode. My test mode command looks like this:

"serve:test": "cross-env NODE_ENV=test vue-cli-service serve --mode test"

When I run this command, I get the following errors:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$background-color".
        on line 96 of C:\Users\Me\Code\myapp\src\assets\css\sass\_main.style.scss
>>   background: $background-color;
   --------------^

 @ ./src/assets/css/sass/_main.style.scss 4:14-249 14:3-18:5 15:22-257
 @ ./src sync ^.*$
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://192.168.255.142:8080/sockjs-node (webpack)/hot/dev-server.js ./src/index.js

 error  in ./src/assets/css/sass/_myapp.style.scss

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$logoPathInverted".
        on line 9 of C:\Users\Me\Code\myapp\src\assets\css\sass\_myapp.style.scss
>>   background: url($logoPathInverted) no-repeat;
   ------------------^

 @ ./src/assets/css/sass/_myapp.style.scss 4:14-248 14:3-18:5 15:22-256
 @ ./src sync ^.*$
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://192.168.255.142:8080/sockjs-node (webpack)/hot/dev-server.js ./src/index.js

The thing is that _main.style.scss and _myapp.style.scss are loaded INTO the file where those variables are declared and are never referenced anywhere on their own. Something like this:

// my_file_with_declared_vars.scss

$var: #fff;

@import '_main.style.scss';
@import '_myapp.style.scss';

When I run npm run serve ("serve": "vue-cli-service serve"), my app starts up fine.

Why aren't my styles loading properly in test mode?

haoqunjiang commented 4 years ago

Thanks for submitting this issue! Due to our limited time, we ask you to include a reproduction link to a minimal full reproduction of your problem (for example in a GitHub repository) so we can find what is causing the issue. Thank you for your understanding!

vue-bot commented 4 years ago

Hello! This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues requiring feedback after 20 days of inactivity. It’s been at least 10 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. (A maintainer can also add the label not stale to keep this issue open.)

Thanks for being a part of the Vue community! 💪💚️

vue-bot commented 4 years ago

Hey again! 😸️

It’s been 20 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. 🤖 Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Vue community! 💚️

vuejs / vue-cli