Nuxt•3y ago

CSS not importing on vuetify plugin.

Got a plugin to apply vuetify to my project using createVuetify Inside this plugin I also got a lot of css files being imported, but they just aren't working, what am I doing wrong?

2 Replies

MedimOP•3y ago

// plugins/vuetify.js
import { createVuetify, ThemeDefinition } from "vuetify";
import "vuetify/styles";

//Theming
import "@/assets/css/buttons.css";
import "@/assets/css/cards.css";
import "@/assets/css/icons.css";
import "@/assets/css/modais.css";
import "@/assets/css/pagination.css";
import "@/assets/css/selection-controls.css";
import "@/assets/css/tabs.css";
import "@/assets/css/tables.css";
import "@/assets/css/text-fields.css";
import "@/assets/css/margins.css";
import "@/assets/css/animations.css";
import "@/assets/css/menu.css";
import "@/assets/css/colors.css";
import "@/assets/css/variables.scss";
import "@/assets/css/tailwind.css";
//Custom theme
const customTheme: ThemeDefinition = {
  dark: false,
  colors: {
    primary: "#006aff",
    secondary: "#ff4343",
    info: "#69C9D6",
    success: "#8AEB94",
    red: "#ff4343",
    pink: "#EB8ADF",
    lightGreen: "#43EB9E",
    lightBlue: "#6CCDD0",
    lightBlueSecondary: "#8CBFDB",
    extraLightGreen: "#5ce0a5",
    extraRed: "#F65959",
    darkGreen: "#33a652",
    green: "#05b634",
    background: "#fff",
    backgroundPanel: "#fff",
    backgroundSecondary: "#ebeef7",
    backgroundHover: "#d7def5",
    backgroundTerciary: "#bdc4da",
    darkGray: "#323232",
    ligthGray: "#dfe6f0",
    border: "#c0c0c0",
  },
};

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    ssr: false,
    theme: {
      defaultTheme: "customTheme",
      themes: {
        customTheme,
      },
    },
  });

  nuxtApp.vueApp.use(vuetify);
});

// plugins/vuetify.js
import { createVuetify, ThemeDefinition } from "vuetify";
import "vuetify/styles";

//Theming
import "@/assets/css/buttons.css";
import "@/assets/css/cards.css";
import "@/assets/css/icons.css";
import "@/assets/css/modais.css";
import "@/assets/css/pagination.css";
import "@/assets/css/selection-controls.css";
import "@/assets/css/tabs.css";
import "@/assets/css/tables.css";
import "@/assets/css/text-fields.css";
import "@/assets/css/margins.css";
import "@/assets/css/animations.css";
import "@/assets/css/menu.css";
import "@/assets/css/colors.css";
import "@/assets/css/variables.scss";
import "@/assets/css/tailwind.css";
//Custom theme
const customTheme: ThemeDefinition = {
  dark: false,
  colors: {
    primary: "#006aff",
    secondary: "#ff4343",
    info: "#69C9D6",
    success: "#8AEB94",
    red: "#ff4343",
    pink: "#EB8ADF",
    lightGreen: "#43EB9E",
    lightBlue: "#6CCDD0",
    lightBlueSecondary: "#8CBFDB",
    extraLightGreen: "#5ce0a5",
    extraRed: "#F65959",
    darkGreen: "#33a652",
    green: "#05b634",
    background: "#fff",
    backgroundPanel: "#fff",
    backgroundSecondary: "#ebeef7",
    backgroundHover: "#d7def5",
    backgroundTerciary: "#bdc4da",
    darkGray: "#323232",
    ligthGray: "#dfe6f0",
    border: "#c0c0c0",
  },
};

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    ssr: false,
    theme: {
      defaultTheme: "customTheme",
      themes: {
        customTheme,
      },
    },
  });

  nuxtApp.vueApp.use(vuetify);
});

Full code. Importing it at the css array in nuxt.config.ts doesn't work either.

Hendrik Jan•2y ago

Did you find a solution yet?

Gaming

Programming

CSS not importing on vuetify plugin.