Drupal theme using Vite contrib module
Basic theme dev setup for Vite after installing a Drupal Starterkit theme
Tested in Valet and MAMP Pro local environments.
themes/custom/THEME/package.json
{
"name": "theme",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"sass": "^1.83.0",
"vite": "^6.0.6"
}
}
themes/custom/THEME/THEME.info.yml
# Disabled, using vite:true in libraries file instead.
# vite:
# enableInAllLibraries: true
# enableInAllComponents: true
# Includes library that points to vite (asset server) files.
libraries:
- THEME/theme-style-script
# Require the Vite module.
dependencies:
- 'vite:vite'
themes/custom/THEME/THEME.libraries.yml
# Libraries pointing to vite (asset server) during development
theme-style-script:
vite:
enabled: true
manifest: assets/.vite/manifest.json
baseUrl: '/themes/custom/THEME/assets/'
css:
theme:
src/sass/style.scss: {}
js:
src/js/script.js: {}
dependencies:
- core/drupal
- core/once
themes/custom/THEME/vite.config.js
import { defineConfig } from 'vite'
import path from 'path'
import fs from 'fs'
import os from 'os'
const homeDir = os.homedir()
export default defineConfig({
build: {
outDir: 'assets',
emptyOutDir: true,
manifest: true,
sourcemap: true,
cssMinify: false,
rollupOptions: {
// overwrite default .html entry
input: [
path.resolve(__dirname, './src/sass/style.scss'),
path.resolve(__dirname, './src/js/script.js'),
],
// Remove the [hash] from file name.
output: {
entryFileNames: `[name].js`,
assetFileNames: `[name].[ext]`,
}
}
},
css: {
devSourcemap: true,
preprocessorOptions: {
scss: {
api: 'modern',
quietDeps: true,
},
},
},
server: {
host: "0.0.0.0",
port: 5173,
strictPort: true,
origin: 'https://local.drupal10.test',
https: {
// provide path starting from home directory.
key: fs.readFileSync(path.resolve(homeDir, 'PATH/TO/KEY')),
cert: fs.readFileSync(path.resolve(homeDir, 'PATH/TO/CERT')),
},
},
})
sites/default/settings.local.php
/**
* Vite settings.
*/
$settings['vite'] = [
'devServerUrl' => 'https://local.drupal10.test:5173'
];
Once setup, run npm run build
to build the dist/manifest.json and asset files. This will be used along with the Vite module when in production mode.
Then open in browser using local URL: e.g. https://local.drupal10.test