@inkline/plugin

使用 Inkline 和您最喜欢的开发环境的最简单、最快捷的方式。我们官方支持与 Nuxt.js、Vite.js 和 Webpack.js 的集成。

主页 · 文档 · Storybook · 问题追踪器

安装

npm i -S @inkline/plugin @inkline/inkline@next

配置

创建一个 inkline.config.ts 文件并根据需要覆盖配置

import { defineConfig } from '@inkline/config';

export default defineConfig({
    theme: {
        default: {
            color: {
                primary: '#178ab0'
            }
        }
    }
});

访问配置参考获取详细信息。

集成

Vite.js

将 @inkline/plugin/vite 添加到您的 vite.config.ts 文件的 plugins 中。

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

export default defineConfig({
    plugins: [
        inkline()
    ]
});

可以选择使用您首选的选项配置集成

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

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

Webpack.js

将 @inkline/plugin/vite 添加到您的 webpack.config.js 文件的 plugins 中。

const inkline = require('@inkline/plugin/webpack');

module.exports = {
    plugins: [
        inkline()
    ]
};

可以选择使用您首选的选项配置集成

const { resolve } = require('path');
const inkline = require('@inkline/plugin/webpack');

module.exports = {
    plugins: [
        inkline({
            configFile: resolve(process.cwd(), 'inkline.config.ts'),
            outputDir: resolve(__dirname, 'src/css/variables'),
            extName: '.scss'
        })
    ]
};

Nuxt.js

将 @inkline/plugin/nuxt 添加到您的 nuxt.config.ts 文件的 modules 中。

export default defineNuxtConfig({
    modules: ['@inkline/plugin/nuxt']
});

可以选择使用您首选的选项配置集成

import { resolve } from 'path';

export default defineNuxtConfig({
    modules: ['@inkline/plugin/nuxt'],
    inkline: {
        /**
         * @inkline/plugin 
         * @description provides import specific options
         */
         
        import: {
            mode: 'global', // Import mode: 'global' | 'auto'
            styles: true,   // Import styles using the module
            scripts: true,  // Import scripts using the module
            utilities: true // Import utility classes using the module
        },
        
        /**
         * @inkline/config
         * @description provides configuration file specific options
         */
         
        configFile: resolve(process.cwd(), 'inkline.config.ts'),
        outputDir: resolve(__dirname, 'src/css/variables'),
        extName: '.scss',
        
        /**
         * @inkline/inkline
         * @description provides configuration file specific options
         */
         
        globals: {
            color: '',                         // Default color variant
            colorMode: 'system',               // Default color mode: 'system' | 'light' | 'dark' | string
            colorModeStrategy: 'localStorage', // Default color mode startegy: 'localStorage' | string
            componentOptions: {},              // Component specific global overrides
            locale: 'en',                      // Default translation
            size: '',                          // Default size variant
            validateOn: ['input', 'blur']     // Default validation events
        } 
    }
});