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