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
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',
})
