N
Nuxt•3w ago
Hugo

Scss and tailwind on nuxt

Hi guys, i have troubles settings scss. In the config i have, scss works but create lot of files (2 per .scss file), i would like all scss file be compiled on one single file. Also i addes tailwind and i would like to make it work too. If you could help me to understand, thank you. My nuxt config 
export default defineNuxtConfig({
  // https://v3.nuxtjs.org/guide/directory-structure/nuxt.config/

  // As of RC12 Nuxt 3 supports Hybrid rendering mode
  // https://v3.nuxtjs.org/guide/concepts/rendering#route-rules
  //   routeRules: {
  //     '/pages/**': { swr: true },
  //     '/posts/**': { static: true },
  //   },

  modules: [// https://pinia.esm.dev
    // https://vueuse.org/
    '@nuxtjs/tailwindcss', '@pinia/nuxt', '@vueuse/nuxt', '@nuxt/image', '@nuxtjs/i18n', '@nuxt/icon'
  ],

  css: [
    '~/assets/css/tailwind.css',
    '~/assets/scss/main.scss',
    '~/assets/css/fonts.css'
  ],
  i18n: {
    locales: [
        {code: 'en', iso: 'en', file: 'en.json'},
        {code: 'fr', iso: 'fr-FR', file: 'fr.json'}
    ],
    defaultLocale: 'fr',
    baseUrl:process.env.FRONTEND_URL,
    detectBrowserLanguage: {
        useCookie: true,
        cookieKey: 'i18n_redirected',
        redirectOn: 'root',  // recommended
    },
  },
  image: {
    providers: {
      directus: {
        name: "Directus",
        provider: '~/providers/DirectusProvider',
        options: {
          baseURL: process.env.DIRECTUS_URL,
        },
      },
    },
  },

  runtimeConfig: {
    public: {
      directusUrl: process.env.DIRECTUS_URL,
    },
  },

  postcss: {
    plugins: {
      'postcss-import': {},
      'tailwindcss/nesting': {},
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          implementation: require('sass'),
          api: 'modern-compiler' 
        },
      },
    },
  },


  compatibilityDate: '2024-11-01',
})
export default defineNuxtConfig({
  // https://v3.nuxtjs.org/guide/directory-structure/nuxt.config/

  // As of RC12 Nuxt 3 supports Hybrid rendering mode
  // https://v3.nuxtjs.org/guide/concepts/rendering#route-rules
  //   routeRules: {
  //     '/pages/**': { swr: true },
  //     '/posts/**': { static: true },
  //   },

  modules: [// https://pinia.esm.dev
    // https://vueuse.org/
    '@nuxtjs/tailwindcss', '@pinia/nuxt', '@vueuse/nuxt', '@nuxt/image', '@nuxtjs/i18n', '@nuxt/icon'
  ],

  css: [
    '~/assets/css/tailwind.css',
    '~/assets/scss/main.scss',
    '~/assets/css/fonts.css'
  ],
  i18n: {
    locales: [
        {code: 'en', iso: 'en', file: 'en.json'},
        {code: 'fr', iso: 'fr-FR', file: 'fr.json'}
    ],
    defaultLocale: 'fr',
    baseUrl:process.env.FRONTEND_URL,
    detectBrowserLanguage: {
        useCookie: true,
        cookieKey: 'i18n_redirected',
        redirectOn: 'root',  // recommended
    },
  },
  image: {
    providers: {
      directus: {
        name: "Directus",
        provider: '~/providers/DirectusProvider',
        options: {
          baseURL: process.env.DIRECTUS_URL,
        },
      },
    },
  },

  runtimeConfig: {
    public: {
      directusUrl: process.env.DIRECTUS_URL,
    },
  },

  postcss: {
    plugins: {
      'postcss-import': {},
      'tailwindcss/nesting': {},
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          implementation: require('sass'),
          api: 'modern-compiler' 
        },
      },
    },
  },


  compatibilityDate: '2024-11-01',
})
No description
2 Replies
kapa.ai
kapa.ai•3w ago
Hi @Hugo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address your issues with SCSS and Tailwind in Nuxt, let's break down the problem and provide some solutions: 1. SCSS Compilation: To compile all your SCSS files into a single file, you need to adjust your SCSS setup. Instead of having Nuxt process each SCSS file individually, you should create a main SCSS file that imports all other SCSS files. Create a main SCSS file (e.g., ~/assets/scss/main.scss) and import all other SCSS files there: 
@import 'file1';
@import 'file2';
// ... import other SCSS files
@import 'file1';
@import 'file2';
// ... import other SCSS files
Then, in your nuxt.config.js, only include this main SCSS file: 
css: [
  '~/assets/css/tailwind.css',
  '~/assets/scss/main.scss',
  '~/assets/css/fonts.css'
],
css: [
  '~/assets/css/tailwind.css',
  '~/assets/scss/main.scss',
  '~/assets/css/fonts.css'
],
This approach will result in a single compiled CSS file. 2. Tailwind Integration: Your configuration already includes Tailwind CSS, which is good. The @nuxtjs/tailwindcss module is added to the modules array, and you've included the Tailwind CSS file in the css array. To ensure Tailwind works correctly with SCSS, make sure your tailwind.config.js file is properly set up. Here's a basic example: 
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
3. PostCSS Configuration: Your PostCSS configuration looks good. It includes the necessary plugins for Tailwind and SCSS to work together. 4. Vite Configuration: Your Vite configuration for SCSS looks correct. However, you might want to add the additionalData option if you need to inject global SCSS variables or mixins: 
vite: {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "~/assets/scss/_variables.scss" as *;',
        implementation: require('sass'),
        api: 'modern-compiler' 
      },
    },
  },
},
vite: {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@use "~/assets/scss/_variables.scss" as *;',
        implementation: require('sass'),
        api: 'modern-compiler' 
      },
    },
  },
},
This setup will allow you to use SCSS variables and mixins across your components without explicitly importing them Docs > Getting-started > Styling > Using Preprocessors (https://nuxt.com/docs/getting-started/styling#using-preprocessors). With these adjustments, your SCSS should compile into a single file, and Tailwind should work correctly alongside SCSS. If you're still experiencing issues, make sure all your dependencies are up to date and that you're using compatible versions of Nuxt, Tailwind, and the related modules. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@122807566475591680> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Want results from more Discord servers?
Add your server