Vue-cli: Global scss variables and mixins

[chris-dura]

Version

4.0.5

Reproduction link

https://github.com/chris-dura/vue-cli-4-0-5

Environment info

Environment Info:

  System:
    OS: macOS Mojave 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-4960HQ CPU @ 2.60GHz
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    Yarn: 1.16.0 - ~/.yarn/bin/yarn
    npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
  Browsers:
    Chrome: 77.0.3865.120
    Firefox: 64.0
    Safari: 12.1.1
  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.5 
    @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.5 
    @vue/cli-plugin-babel: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-eslint: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-router: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-typescript: ^4.0.0 => 4.0.5 
    @vue/cli-plugin-vuex: ^4.0.0 => 4.0.5 
    @vue/cli-service: ^4.0.0 => 4.0.5 
    @vue/cli-shared-utils:  4.0.5 
    @vue/component-compiler-utils:  3.0.0 
    @vue/eslint-config-standard: ^4.0.0 => 4.0.0 
    @vue/eslint-config-typescript: ^4.0.0 => 4.0.0 
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.0.0 => 5.2.3 
    typescript: ~3.5.3 => 3.5.3 
    vue: ^2.6.10 => 2.6.10 
    vue-class-component: ^7.0.2 => 7.1.0 
    vue-eslint-parser:  5.0.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.7.1 
    vue-property-decorator: ^8.3.0 => 8.3.0 
    vue-router: ^3.1.3 => 3.1.3 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.0.1 => 3.1.1 
  npmGlobalPackages:
    @vue/cli: 4.0.5

Steps to reproduce

1. vue create my-project
2. Create src/scss/_variables.scss file with a $some-color variable
3. Reference $some-color in HelloWorld.vue styles
4. Pass prependData: '@import "~@/scss/_variables.scss";' to sass-loader options in vue.config.js

What is expected?

The scss for HelloWorld.vue compiles with no errors.

What is actually happening?

A scss compile error:

SassError: Undefined variable.
   ╷
51 │   color: $some-color;
   │          ^^^^^^^^^^^
   ╵

---

Initially, I tried to load a global stylesheet from my node_modules folder, and at first, thought that was why it wasn't working. There were a lot of issues and discussion already on GitHub, however, the solutions didn't work for me, even after simplifying it to just pull in from the src folder like everyone else was doing.

[x6ax6b]

You can't leave off the _
It doesn't seem to respect SASS syntax.

[chris-dura]

@x6ax6b -- Hmmm... that doesn't make much sense, because importing directly into the component works fine without the _ and .scss extension: https://github.com/chris-dura/vue-cli-4-0-5/blob/master/src/components/HelloWorld.vue#L48

Also, I updated my repo anyway... but it still doesn't work 😖

[sodatea]

No nested sassOptions.

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "~@/scss/_variables.scss";`
      }
    }
  }
}

[chris-dura]

Thanks @sodatea!

This is quite confusing, because the Vue migration docs just reference the sass-loader changelog: https://cli.vuejs.org/migrating-from-v3/#for-sass-scss-users

And when you go to the sass-loader change log...

move all sass (includePaths, importer, functions) options to the sassOptions option.

And, I didn't realize that didn't apply to the prependData...