Gridsome app - SCSS compiles but styles not loading

[gkurl]

Hello Team,

Following from my email - I have a basic vanilla Gridsome VueJs app that I was having SCSS compiling issues with - I have managed to bypass the SCSS compiling/error issues and the app is now compiling. However, I am seeing the styles not loading as they should - I think the JS and responsive elements work but the styles/colours do not (please feel free to double check JS/responsive).

Component in this example I am trying to get working is the header as a POC - that way I can start implementing the others and constructing the site - I can see in my dev console the util.js file and the header.js file that I created following the below linked guide based off of the read-more.js in that example - I am loading this js file as a static file in the Gridsome static directory (assuming this is the only way to do this in Gridsome app?), and I have a custom index.html page that overrides the default one to include the progressive enhancement tag mentioned in the installation docs.

The guides I followed were the main setup guides in the doc in installing the codyframe as an NPM package and copying the files from the package to the local directory - the other guide I followed was this:

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

But this is how currently the header is appearing:

I have attached a ZIP of my project without the node_modules compiled so you an compile and build yourselves to investigate.

If you need more details let me know - project is very bare bones and currently am only trying to get one component to work so hopefully shouldn't be too bad to decipher.

It's very strange because I can see the colours for primary etc in the dev console (I am using Firefox Developer Edition) but they are not appearing on page.

Thanks, Gagandeep

devthatspeaks.zip

[claudia-romano]

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 *;

[gkurl]

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?

[claudia-romano]

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!

[gkurl]

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

[claudia-romano]

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?

[gkurl]

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!