FAQ
SCSS Image Path Handling in Vite to Prevent Duplication
When writing SCSS, do not use url(../../assets/images/image.jpg).
Vite will treat it literally, and it will copy the image file into the final assets output folder, causing duplicate files.
Instead, just use the relative path assuming Vite will correctly manage the files. In the custom Vite setup, there is a condition like:
How to enquieue CSS and JS files in Vite?
In this example you created new file called newFile.css and newFile.js
Scss will automatically build an css file for you to enqueue under assets/css for css and assets/js for js. Below is the sample code.
enqueue.php
function enqueue_vite_scripts() {
wp_enqueue_style( 'your-style-id', get_template_directory_uri().'/assets/css/newFile.css' );
wp_enqueue_script('your-script-id', get_template_directory_uri() . '/assets/js/scripts.js');
}Scss will automatically build an css file for you to enqueue under assets/css/custom-page for css and assets/js/custom-page for js. Below is the sample code.
enqueue.php
function enqueue_vite_scripts() {
wp_enqueue_style( 'your-style-id', get_template_directory_uri().'/assets/css/custom-page/newFile.scss' );
wp_enqueue_script('your-script-id', get_template_directory_uri() . '/assets/js/custom-page/scripts.js');
}How to update AIOS Vite to latest version?
To update the Vite package, you can follow these steps:
Navigate to your project directory.
Copy the code below and paste it in your terminal to update Vite package.
vite.config.js
import { defineConfig } from 'vite';
import * as glob from 'glob';
import path from 'path';
import fs from 'fs';
import autoprefixer from 'autoprefixer';
import dotenv from 'dotenv';
// Load environment variables from .env file
dotenv.config();
// Replace this line if you are using a custom theme ex: const themeName = 'theme-folder-name';
const themeName = process.env.THEME_NAME;
if (!themeName) {
throw new Error("THEME_NAME is not defined in the .env file.");
}
const themePath = `web/app/themes/${themeName}`;
// Collect all JS files
const jsFiles = glob.sync(`${themePath}/src/js/**/*.js`);
// Collect all SCSS files, filtering out empty ones
const scssFiles = glob
.sync(`${themePath}/src/scss/**/*.scss`, { ignore: '**/_*.scss' })
.filter((file) => fs.statSync(file).size > 0); // Only include non-empty files
if (jsFiles.length === 0 && scssFiles.length === 0) {
console.log('No source files to compile.');
process.exit(0);
}
export default defineConfig(({ command }) => ({
root: path.resolve(__dirname, themePath, 'src'),
build: {
outDir: path.resolve(__dirname, themePath, 'assets'),
emptyOutDir: false,
rollupOptions: {
input: [
...jsFiles.map((file) => path.resolve(file)),
...scssFiles.map((file) => path.resolve(file)),
],
output: {
entryFileNames: ({ facadeModuleId }) => {
const regex = /js\/([^\/]+)\/[^\/]+\.js$/;
const match = facadeModuleId.match(regex);
if (match && match[1]) {
return `js/${match[1]}/[name].js`;
}
return 'js/[name].js';
},
assetFileNames: ({ names, originalFileNames }) => {
if (names[0].endsWith('.css') && originalFileNames[0] !== undefined) {
const regex = /scss\/([^\/]+)\/[^\/]+\.scss$/;
const match = originalFileNames[0].match(regex);
if (match && match[1]) {
return `css/${match[1]}/[name].css`;
}
return 'css/[name].css';
} else if (names[0].endsWith('.png')) {
return 'images/[name].[ext]';
}
return `[name].[ext]`;
},
},
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src/*'),
},
},
css: {
postcss: {
plugins: [
require('postcss-url')(),
require('postcss-nested')(),
autoprefixer(),
require('postcss-sort-media-queries')({
sort: 'mobile-first',
}),
],
},
},
}));Change theme name in the above code to what theme you want to compile vite.
vite.config.js
const themeName = 'theme-folder-name';Open your terminal and navigate to your project directory.
Run the following command to update the Vite package to the latest version:
terminal
npm update viteIf you want to update to a specific version, you can specify the version number like this:
terminal
npm update vite@<version-number>IF you want to update to the latest version of Vite, you can use the following command:
terminal
npm install vite@latestAfter updating, make sure to check your package.json file to confirm that the Vite version has been updated.
Once you are done editing the files, add or stage your changes.
terminal
git add .Commit the changes you’ve made.
terminal
git commit -m '<commit_message>'Push your changes.
terminal
git push origin 'Branch_Name'Create Merge Request.
https://gitlab.forge99.com/your_project_group/your_project_urlLast updated on