README

Support for Vite in Silverstripe, built atop Laravel’s Vite components.

Setup

composer require bigfork/silverstripe-vitesse

Setup the laravel-vite-plugin in your vite.config.js:

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'src/scss/style.scss',
        'src/scss/editor.scss',
        'src/js/app.js',
      ],
      refresh: [
        'templates/**/*.ss',
      ],
    }),
  ],
  // ... etc
})

Full configuration example and matching YAML configuration.

Usage

Most of the Laravel Vite documentation applies, though with an adjusted syntax for Silverstripe templates vs Blade.

Include scripts/stylesheets using the <% vite %> tag, for example:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <% base_tag %>
    {$MetaTags}

    <% vite 'src/scss/style.scss', 'src/js/app.js' %>
</head>

For React projects, you can also include <% viteReactRefresh %>. Note that this must be included before any calls to <% vite %>

Paths for assets processed via Vite can be output using $viteAsset:

<img src="{$viteAsset('src/images/logo.svg')}" alt="Logo" width="100" height="100" />

File contents for assets processed via Vite can be output using $viteContent:

<div class="my-inline-svg">
    {$viteContent('src/images/image.svg')}
</div>

Configuration

If you’re using different build directories, or want to take advantage of other features, you can adjust configuration via YAML or directly in PHP:

YAML config:

SilverStripe\Core\Injector\Injector:
  Bigfork\Vitesse\Vite:
    calls:
      buildDirectory: [ 'useBuildDirectory', ['dist'] ]

PHP method calls:

use Bigfork\Vitesse\Vite;
use SilverStripe\CMS\Controllers\ContentController;

class PageController extends ContentController
{
    protected function init()
    {
        parent::init();
        Vite::inst()->useScriptTagAttributes(['data-foo' => 'bar']);
    }
}

bigfork/silverstripe-vitesse

包简介

关键字：

README 文档

README

Setup

Usage

Configuration

统计信息

GitHub 信息

其他信息