[Bug]: Custom scss variables not working when using yarn build & yarn start

[FabianClemenz]

Describe the Bug

I'm using the vuestorefront custom boilerplate - there is vuestorefront-ui v1 installed.

i have the $theme_primary_color var overwritten in a custom scss file and trying to load it in the default.vue. If i use yarn dev everything works fine, but if i build and then run yarn start it creates the custom color, but it is not assigned.

this is my themeConfig.js

export default {
  scss: getScss()
};

function getScss() {
  const scss = [];
  scss.push(require.resolve('@storefront-ui/shared/styles/_helpers.scss', { paths: [process.cwd()] }));

  scss.push('~assets/fonts/fonts.scss');

  if (process.env.SHOP_THEME !== undefined) {
    scss.push('~scss/' + process.env.SHOP_THEME + '/index.scss');
  }
  return scss;
}

this is the style section of my default.vue

<style lang="scss">
@import "@storefront-ui/shared/styles/helpers/_colors.scss";

@if variable-exists(theme_primary_color) {
  :root {
    @include generate-color-variants(--_c-custom-primary, $theme_primary_color);
    @include assign-color-variants(--c-primary, --_c-custom-primary);
  }
}

@if variable-exists(theme_primary_font_family) {
  :root {
    --font-family--primary: #{$theme_primary_font_family};
  }
}

@if variable-exists(theme_secondary_font_family) {
  :root {
    --font-family--secondary: #{$theme_secondary_font_family};
  }
}

@if variable-exists(theme_accent_font_family) {
  :root {
    --font-family--accent: #{$theme_accent_font_family};
  }
}

Current behavior

No response

Expected behavior

yarn build and yarn start should work as yarn dev with our custom scss

Steps to reproduce

No response

What package and version of StorefrontUI are you using?

@storefront-ui/vue@0.11.4

What framework does your application use?

Vue.js / Nuxt.js

What version of Node.js are you using?

16.14.2

What browser (and version) are you using?

Chrome, Safari, Edge Chromium (always the most current)

What operating system (and version) are you using?

macOS, Windows

Relevant log output

No response

Able to fix / change the documentation?

• Yes
• No

Code of Conduct

• I agree to follow this project's Code of Conduct

[FabianClemenz]

I have found a different behaviour between dev and build.

We also created a custom css class top-bar for the TopBar.vue

<style lang="scss">
.topbar {
  position: relative;
  z-index: 2;
  background-color: var(--c-primary);
}

The css class is added after the base css class:

and its used in dev mode

but after build and start its not taken

[FabianClemenz]

and with AppFooter.vue the same (with the scss provided) (we want the --_c-gray-accent as background)

using yarn dev:

using yarn build and yarn start:

[FabianClemenz]

ok i got it - but i don't know how i solved it. I think its more like an nuxt or vsf issue.

i updated these 3 deps to specified version

"@vue-storefront/middleware": "~2.7.5",
"@vue-storefront/nuxt": "~2.7.5",
"@vue-storefront/nuxt-theme": "~2.7.5",

i set the node env to 16.14.x in the theme/package.json like before in the main package.json (vsf only works with v16)

and i added extractCss: true, to build config in nuxt.config.js

i don't know which of these fixed it - but after days of testing - i hope this will help others