@inkline/plugin

Inklineをお気に入りの開発環境で使用する最も簡単で最速の方法。 Nuxt.js、Vite.js、およびWebpack.jsとの統合を公式にサポートしています。

ホームページ · ドキュメント · Storybook · Issue Tracker

インストール

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
        } 
    }
});

バグと機能のリクエスト

バグや機能のリクエストがありますか？まず、既存のクローズされたIssueを検索してください。問題やアイデアがまだ解決されていない場合は、新しいIssueを開いてください。

コミュニティ

Inklineの開発に関する最新情報や、プロジェクトのメンテナーやコミュニティメンバーとのチャットを入手してください。

Twitterで@inklineをフォローしてください。
DiscordでInklineに参加してください。
開発者は、npmや同様の配布メカニズムを通じて配布する際に、Inklineの機能を追加または変更するパッケージにキーワードinklineを使用し、最大限の発見可能性を確保する必要があります。