Scss Custom Build

Live example of basic usage of Nuxt UIKit 3 on Stackblitz.

Example on how to customize UIkit theme using scss. Please remember to check UIkit docs

👇 the reciepie

1. install nuxt-uikit3 module, scss, sass-loader. I'll be using pnpm for this example but you can use any pkg manager

pnpm i -D @samk-dev/nuxt-uikit3 sass sass-loader

2. register nuxt-uikit3 module in nuxt

export default defineNuxtConfig({
  modules: ['@samk-dev/nuxt-uikit3']
})

3. set module options to compile our scss. In this example we'll store the assets in ~/assets/styles

in our styles directory will put 2 files: variables.scss - app.scss. you can mixins.scss if you want, in this example will use UIkit default mixins.

export default defineNuxtConfig({
  modules: ['@samk-dev/nuxt-uikit3'],
  uikit3: {
    css: {
      // disable core and theme css to minimize final css bundle 
      coreCss: false,
      coreTheme: false,
      build: {
        preprocessor: 'scss',
        stylesPath: '~/assets/styles/app.scss', // our main scss entrypoint
        variablesPath: '~/assets/styles/variables.scss' // this is optional. set it if you want to access variables inside .vue files
      }
    }
  }
})

variables.scss

$global-primary-background: black;
$global-link-color: #DA7D02;

app.scss

// your custom variables
@import "./variables.scss";

// UIkit default variables and mixins
@import "uikit/src/scss/variables.scss";
@import "uikit/src/scss/mixins.scss";

// import UIkit
@import "uikit/src/scss/uikit.scss";

4. start dev server

pnpm dev

If you want to access scss variables in .vue components or layouts or pages files just use them no need to import variables.scss into .vue files

<style lang="scss" scoped>
.some-div {
  background: $global-primary-background;
}
</style>

Live example on Stackblitz