I have one application where I want to separate my asset folders in Vite configuration.
This is how my current vite.config.js look like. I want something like
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
build: {
assetsDir: './images'
},
plugins: [
laravel({
input: [
'resources/css/app.css,'
'resources/scss/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
});
I want to separate all images and CSS after the build. For instance
Build - Assets - images (all images will be going)
Build - Assets - Css (all CSS will be going)
Related
How to use laravel vite with custom package development. I tried to add my path to vite.config.js but am getting an error.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
// input: ['../Packages/Plugin/Customers/public/css/styles'],
refresh: true,
}),
],
});
I tried to duplicate this in my package folder but same error. Can you please assist.
I followed Kamlesh login, I was able to create vite.config.js file inside my custom package as shown below.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/asset/css/settings.css',
'resources/asset/js/custom.js',
'resources/asset/js/ecstore_profile.js',
'resources/asset/js/general_settings.js',
]),
],
resolve: {
alias: {
'settings': '/resources/asset/css/settings.css',
'custom': '/resources/asset/js/custom.s',
'profile': '/resources/asset/js/ecstore_profile.js',
'general': '/resources/asset/js/general_settings.js',
},
},
});
Then I added each file to the vite.config.js file. Then run build inside the custom package and publish this to laravel public folder. all working fine.
I am building a project using Laravel/Inertia/Vue and I am using Tailwind CSS.
I want to have separate admin.css and client.css files using tailwindcss 3.2 ability to have multiple config files:
./styles/admin.css
#config "./tailwind.admin.config.js"
#tailwind base;
#tailwind components;
#tailwind utilities;
but the problem is that Vite will build just app.css for me not the admin one
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '#vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
ssr: 'resources/js/ssr.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
ssr: {
noExternal: ['#inertiajs/server'],
},
server: {
host: "localhost",
},
});
app.css is imported in app.js
I can not figure it out
Could you please help me?
I want to have separate admin.css and client.css files per each tailwindcss config file.
You can pass an array of input files to vite as follows:
input: ['resources/js/app.js','resources/css/admin.css','resources/css/client.css']
This should result in seperate output files in your build directory.
If you want to keep the css as javascript import you can create a second InertiaApp for the admin area:
Copy app.js and rename it like 'admin.js'
Change css import in admin.js to '/styles/admin.css'
Change your vite input to: input: ['resources/js/app.js','resources/js/admin.js']
Use a different blade layouts for the 'admin' area with reference to admin.js instead of app.js : #vite('resources/js/admin.js')
Thanks #dustin for your answer. Here are some more things:
I can split javascript application by defining multiple rootViews using inertia-laravel#0.3.2 in HandleInertiaRequests.php middleware:
public function rootView(Request $request)
{
if ($request->routeIs('admin.*')) {
return 'admin';
}
return 'app';
}
And have two different apps.
But do you think its a good approach to have two different apps?
I like the separation idea but is it the right way?
I Also have concerns about bundling and mixing in inertia and ssr, would it be a problem for that when you have two apps? I dont know anything about inertia's way of working
I was hoping there is some other method like creating a higher order component or something like that. I am very new to Vue world and I am still trying to learn.
I'm getting extraneous GET requests to /<slug>/app.scss.map, where <slug> varies based on where in the site I am. Thankfully I'm only getting this in dev mode (not if I use npm run build to build the assets), but it is very annoying.
I have import "../sass/app.scss"; in my resources/js/app.js, so I'm not surprised that this map file should be generated. The issue is that it isn't and I'm getting a lot of extraneous GET requests with no apparent value that all fail.
What changes do I need to make to either get rid of the GET requests altogether, or produce the expected file served from the correct route (i.e. not one that is local to whatever page I'm on)?
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import path from 'path'
import cdn from 'vite-plugin-cdn-import'
export default defineConfig({
build: {
rollupOptions: {
external: ["jquery"],
output: {
globals: {
jquery: ["$","window.jQuery"],
},
},
},
},
plugins: [
cdn({
// ...
}),
laravel([
'resources/css/app.css',
'resources/js/app.js',
// ...
]),
],
resolve: {
alias: {
// ...
}
},
});
With Laravel Mix I'm generating two different css/js files for Admin and for the main site like this:
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/site/app.js', 'public/js')
.postCss('resources/css/site/app.css', 'public/css', [
require('autoprefixer'),
require('postcss-import'),
tailwindcss('./tailwind.site.config.js'),
])
.options({
processCssUrls: false,
}).version();
mix.js('resources/js/admin/app.js', 'public/_admin/js')
.postCss('resources/css/admin/app.css', 'public/_admin/css', [
require('autoprefixer'),
require('postcss-import'),
tailwindcss('./tailwind.admin.config.js'),
])
.options({
processCssUrls: false,
}).version();
How can I tell vite to do the same thing ??
Thanks!!
The default vite.config.js is
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
],
}),
],
});
Create two vite.config.js files, and also create two tailwind.config.js files for frontend & backend.
I have already posted this solution on github with demo laravel project.
https://github.com/pkfan/setup-laravel-vite-for-multiple-tailwind.config.js
I have upload a video about it.
watch this video on youtube
See https://laravel-vite.dev/guide/extra-topics/multiple-configurations.html.
You will need to add a configuration to config/vite.php, create a new vite.back-office.config.ts file, pass the configuration name to the #vite directive and run slightly different development and build commands.
The docs are TypeScript-focused, but the same technique will work for your JS/CSS assets.
Starting with Tailwind CSS v3.2, hacky workarounds are no longer needed.
You can now define the config file to use inside of your CSS files:
https://tailwindcss.com/blog/tailwindcss-v3-2#multiple-config-files-in-one-project-using-config
I have a PHP project (WordPress theme) with Vite and PostCSS to bundle my JS and CSS files.
The output directory is build and everything worked, but as soon as I import fonts or images in my CSS, Vite copies them into the build folder and changes the paths in the source.
File structure:
styles
|- tailwind.css
|- fonts
|- fa-brands-400.eot
|- fa-brands-400.woff
|- fa-brands-400.woff2
|- fa-brands-400.svg
|- fa-brands-400.ttf
js
|- index.js
vite.config.js
...
In my tailwind.css, I'm importing the font:
#font-face{
font-family:"Font Awesome 5 Brands";
font-style:normal;
font-weight:400;
font-display:block;
src:url(../styles/fonts/font_awesome/fa-brands-400.eot);
src:url(../styles/fonts/font_awesome/fa-brands-400.eot?#iefix) format("embedded-opentype"),url( ../styles/fonts/font_awesome/fa-brands-400.woff2) format("woff2"),url(../styles/fonts/font_awesome/fa-brands-400.woff) format("woff"),url(../styles/fonts/font_awesome/fa-brands-400.ttf) format("truetype"),url(../styles/fonts/font_awesome/fa-brands-400 .svg#fontawesome) format("svg")
}
The problem, Vite copied the imported font files to my build folder and my font import now looks like this (in build/tailwind.css:
#font-face{
font-family:"Font Awesome 5 Brands";
font-style:normal;
font-weight:400;
font-display:block;
src:url(/fa-brands-400.eot);
src:url(/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(/fa-brands-400.woff2) format("woff2"),url(/fa-brands-400.woff) format("woff"),url(/fa-brands-400.ttf) format("truetype"),url(/fa-brands-400.svg#fontawesome) format("svg")
}
Is there a way to disable this? I just want Vite to bundle my JS and CSS, but don't include my assets.
My vite.config.js looks like this:
import postcssImport from "postcss-import"
import tailwindcssNesting from "tailwindcss/nesting"
import tailwindcss from "tailwindcss"
import autoprefixer from "autoprefixer"
import postcssScss from "postcss-scss"
import { defineConfig } from "vite"
export default defineConfig({
build: {
outDir: "build",
cssCodeSplit: true,
emptyOutDir: true,
minify: false,
assetsDir: "",
rollupOptions: {
input: {
index: "js/index.js",
tailwind: "styles/tailwind.css",
},
output: {
entryFileNames: "[name].js",
assetFileNames: "[name].[ext]",
},
},
},
css: {
postcss: {
syntax: postcssScss,
plugins: [postcssImport, tailwindcssNesting, tailwindcss, autoprefixer],
},
},
clearScreen: true,
publicDir: false,
})
I am facing a similar issue with a library build. I want to have an image relative to my css file, but default it is placed at the root and the reference in the css file is also to the root (just like in your problem). I did not find a perfect solution, but I was able to place the image in the same folder as the css file, where the css file also references the image in the same folder. I used the rollup config option output.assetFileNames for this. You can pass your own function and in that function you can add the complete path to the folder where you want to add the asset.
assetFileNames: (assetInfo: PreRenderedAsset): string => {
if (assetInfo.type === 'asset') {
return 'styles/fonts/[name][extname]';
}
else {
return '[name][extname]';
}
},
This will place the fonts in the build/styles/font folder. The references in the css will also be in this folder.
There is one caveat: The references will begin with '/', so they will be from the root of the domain. I have not found a solution for this.