YCLICK UIKIT

Installation

To integrate the YCLICK UIKIT into your project, you can use one of the following package managers:

npm install midas-yclick-uikit

pnpm add midas-yclick-uikit

yarn add midas-yclick-uikit

Configuration

Install the Intelligent SCSS Extension

• Intelligent scss

Configure your workspace

To enable Intelligent SCSS to recognize the variables from the UIKIT, modify your settings.json file in your project by adding the following code:

{
  "scss.scannerExclude": ["**/.git", "**/node_modules/!midas-yclick-uikit", "**/bower_components"]
}

Add an Alias for Imports in Your Vite Configuration

In your vite.config.ts file, add an alias for the imports to make it easier to reference the UIKIT styles:

resolve: {
  alias: {
    '~midas-styles': './node_modules/midas-yclick-uikit/dist/styles',
  },
},

Utilize the Variables in Your SCSS Files

Now you can start using the UIKIT variables in your SCSS files. Import the entire set of variables in your index.scss file:

@import '~midas-styles/variables/_variables.scss';

If you only want the colors for example

@import '~midas-styles/variables/styles/_colors.scss';