bmpf's avatar
bmpf
OP
3 years ago
Level 3

LAravel 9 Vite : Remove Unused styles from my custom css file.

Hello, I'm starting a new project, I installed Laravel ("laravel/framework": "^9.19") and setup vite with breeze, I want to use some custom css from a custom file, lets call it theme.css.

After importing the file to the app.css i get the following :

@import "./theme.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

When building the styles I get all the styles from theme.css, even the ones that I'm not using. Only Tailwind styles are purged. How can I purge unused css from this file ?

I'm wasn't able to find how to do this with vite.

Thanks.

0 likes
11 replies
bmpf's avatar
bmpf
OP
3 years ago
Level 3

@Niush already tried that, the question is I'm not able to configure purge css with vite, webpack was working fine.

2 likes
patprick's avatar

@Online-Marketing I am getting error: "purge is not a function" even though its imported and installed.

failed to load config from /Users/harry/project/vite.config.js
error when starting dev server:
TypeError: purge is not a function
    at file:///Users/harry/project/vite.config.js.timestamp-1675857346632.mjs:13:5
 ELIFECYCLE  Command failed with exit code 1.
cuddystone's avatar

@patprick

My vite.config.js is like this and npm run build works and purges css:

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import purge from '@erbelion/vite-plugin-laravel-purgecss'

export default defineConfig({
   plugins: [
       laravel({
           input: [
               'resources/scss/app.scss',
               'resources/js/app.js'
           ],
           refresh: true,
       }),
       purge({
           templates: ['blade'],
           paths: ['resources/views/*']
       })
   ],
});
andyh81's avatar

@cuddystone I'm getting the same purge is not a function error. My vite.config.js file is the same as yours except my refresh was modified for livewire, but all the same I tried your file and I got the same error. I am running version 0.1.4, any other thoughts on why this isn't working? Thanks

krasnoukhoff's avatar

i have changed purge() to purge.default() and it worked. At least at build stage. Will be yet checking if it renders the expected result though...

UPD. works, but only for static classes if in Vue, uf a component creates classes dynamically, it does not work

erbelion's avatar

@krasnoukhoff purge() import is fixed in v0.2.x.

about dynamically created classes, it's purgecss limitation (i think – lmk if i'm wrong). i'd advise to use safelist option if you don't have many classes.

Please or to participate in this conversation.