Gridsome app - SCSS compiles but styles not loading about codyhouse-framework HOT 6 CLOSED

Hey Claudia - thanks so much yes this makes sense now - I've also realised a little bit about why I was confused - it was because I was placing codes in gridsome components and components are self-contained - which means they won't inherit CSS/JS so you have to specify within the base, custom, scss and js files whereas pages will inherit from layouts etc. So I'm in a steady flow of dev now and will close this ticket off. Looking forward to seeing what I can produce with this, thanks so much for helping! I am amazed you guys came up with this!

from codyhouse-framework.

Hi there, you are importing the base style of the framework, but not the custom-style (this is where the color values are set).
I would suggest you import the framework in the Header.vue:

<style  lang="scss">
  @use '../assets/sass/base' as *;
  @use '../assets/sass/custom-style' as *;
</style>

Then in the single components, you only include the breakpoints/mixins.

<style lang="scss">
@use "../../node_modules/codyhouse-framework/main/assets/css/base/breakpoints" as *;
@use "../../node_modules/codyhouse-framework/main/assets/css/base/mixins" as *;

from codyhouse-framework.

Hey Claudia - thank you so much that fixed it! I've imported it in my main.js file so that it is globally available as per Gridsome instructions and will now go ahead with customising etc. One thing I've noticed after importing however is that the mobile menu seems to appear on desktop like so:

Could you provide any insight into why this is as it seems like a slight hiccup with the JS/CSS maybe?

from codyhouse-framework.

Hi there!
If you are already importing the framework in the main.js file, then you should only import breakpoints/mixins in the components, something like that:

<style lang="scss">
@use "../../node_modules/codyhouse-framework/main/assets/css/base/breakpoints" as *;
@use "../../node_modules/codyhouse-framework/main/assets/css/base/mixins" as *;

Also you should import the framework before the components in the main.js, so that the framework style does not overwrite the components style.

Is that what you are already doing? Thank you!

from codyhouse-framework.

Hi Claudia thanks for your reply again - OK it seems to work fine when you import base and custom into Header.vue which acts as the layout, and then mixins/breakpoints in the individual pages that utilise the layout so in this case, Index.vue in my project. Would I have to import this into every Vue component for every layout/page?

You were right about the import order, if I import the framework first before the normal setup call like so:

import '~/assets/sass/_base.scss'
import '~/assets/sass/_custom-style.scss'

import Header from '~/layouts/Header.vue'

export default function (Vue, { router, head, isClient }) {
  // Set default layout as a global component
  Vue.component('Header', Header)
      head.script.push({
        src: 'https://unpkg.com/codyhouse-framework/main/assets/js/util.js',
        body: true
      })
}

The colours work but for some reason some CSS appears glitchy but importing base and custom into layout and then mixins/breakpoints into pages seems fine. This is how it appears with base.scss in the Header and Custom.scss in main.js

I am wondering however if there is a more global way to import the framework so that all layouts/pages work without the need for individual imports in each component?

Despite the imports in main.js it still needs you have to have the

@use '../assets/sass/base' as *; @use '../assets/sass/custom-style' as *;

In the component layout style tag?

Also I just wanted to check if the instructions on this article:

https://codyhouse.co/blog/post/using-the-codyhouse-components-with-vue-js

Are still accurate especially in regards to having a js file for each Codyframe component that has to be loaded in via Mounted() in Vue?

Thank you for your patience so far! Just trying to get this setup in a more global way without having to repeat code and make multiple JS files for loading for scalability purposes. I've attached latest project changes in the zip if you want/need to have another look.

devthatspeaks.zip

from codyhouse-framework.

Hi there,
you should import the framework (base and custom style folder) in the main.js file before importing your layout (in your case, the <Header> component). This is the only place where you need to import the framework.

In the single components, only import breakpoints and mixins. These two files contain SCSS functions we use when creating the components. For example, we use the breakpoint mixin in the header component:

:root {
  --header-height: 50px;

  @include breakpoint(md) {
    --header-height: 70px;
  }
}

In the main.js you would have:

import '~/assets/sass/_base.scss'
import '~/assets/sass/_custom-style.scss'

import Header from '~/layouts/Header.vue'

While in the <Header>:

<style lang="scss">

@use '../node_modules/codyhouse-framework/main/assets/css/base/breakpoints' as *;
@use '../node_modules/codyhouse-framework/main/assets/css/base/mixins' as *;

</style>

Does that make sense?

from codyhouse-framework.