search

carbon-design-system / carbon-preprocess-svelte

Svelte preprocessors for the Carbon Design System
Apache License 2.0
69 stars 5 forks source link

Optimize Css problem #37

Closed JericoFX closed 2 years ago

JericoFX commented 2 years ago

Hi, i follow the guide and put the optimizeCss() in vite config, it actually work from 700kb to 158kb, but the problem is that i actually lose the Theme toggle and the nav bar submenus.

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { optimizeImports, optimizeCss, elements, icons } from "carbon-preprocess-svelte";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte(), optimizeImports(), elements({ theme: "all" }), icons()],
  base: ""
})

i take it off in the code and now everything work but the css bundle is really hight

nziu commented 2 years ago

fix theme toggle

optimizeCss({
  // https://purgecss.com/safelisting.html
  safelist: {
    standard: ["theme"],
  },
})
JericoFX commented 2 years ago

i will try it , thanks for the response !