Module Options - Vite.js

Effortlessly customize Inkline's Configuration using the Vite.js Plugin options.

Here are the default configuration options:

vite.config.ts

import { defineConfig } from 'vite';
import { resolve } from 'path';
import { inkline } from '@inkline/plugin/vite';

export default defineConfig({
    plugins: [
        inkline({
            configFile: resolve(process.cwd(), 'inkline.config.ts'),
            extName: '.scss',
            outputDir: resolve(__dirname, '.inkline/css')
        })
    ]
});

configFile

Type:
string
Default:
path.resolve(process.cwd(), 'inkline.config.ts')

Description:

Sets the path to the Inkline configuration file, relative to the project root. The default value automatically determines the file extension.

vite.config.ts

import { defineConfig } from 'vite';
import { resolve } from 'path';
import { inkline } from '@inkline/plugin/vite';

export default defineConfig({
    plugins: [
        inkline({
            configFile: resolve(process.cwd(), 'inkline.config.ts'),
        })
    ]
});

extName

Type:
'.scss' | '.css'
Default:
.scss

Description:

Sets the extension of the generated CSS Variables files. By default, Inkline requires the .scss extension, but you can generate .css files for your own needs.

vite.config.ts

import { defineConfig } from 'vite';
import { resolve } from 'path';
import { inkline } from '@inkline/plugin/vite';

export default defineConfig({
    plugins: [
        inkline({
            outputDir: resolve(__dirname, 'src/css/variables'),
        })
    ]
});

outputDir

Type:
string
Default:
path.resolve(process.cwd(), 'inkline.config.ts')

Description:

Sets the output directory for the generated CSS Variables files, relative to the config file. The files are generated using the @inkline/config package.

vite.config.ts

import { defineConfig } from 'vite';
import { resolve } from 'path';
import { inkline } from '@inkline/plugin/vite';

export default defineConfig({
    plugins: [
        inkline({
            outputDir: resolve(__dirname, 'src/css/variables'),
        })
    ]
});