Scss / Sass compiles okay in dev but not generate – Nuxt 3

I have been running my site in dev mode just fine, and all scss and sass is compiling as expected. But have just discovered that when running it in production, from what I can see, about 70% of the scss has not been compiled. There are no 404 errors in the console, and no errors in the generate build console.

My CSS/SCSS is set up as follows:

//nuxt.config
css:[
		"@/assets/scss/main.scss"
	],
	vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "@/assets/scss/tools.scss" as *;'
                },
            },
        },
    },
    alias: {
        "@app": "/@app"
    }

Main.scss contains all my compilable scss:

@import '@/assets/scss/_base/reset.scss';
@import '@/assets/scss/_base/fonts.scss';
@import '@/assets/scss/_base/animations.scss';
@import '@/assets/scss/_base/themes.scss';
@import '@/assets/scss/_base/header.scss';

@import '@/assets/scss/_design/globals.scss';
@import '@/assets/scss/_design/layout.scss';
@import '@/assets/scss/_design/typography.scss';
@import '@/assets/scss/_design/blockquote.scss';
@import '@/assets/scss/_design/common.scss';

@import '@/assets/scss/_overrides.scss';

and tools.scss contains all the required scss variables and mixins etc and is required for main.scss and for all components which is why I’ve added it to the vite compiler options:

@import '@/assets/scss/_variables/max-widths.scss';
@import '@/assets/scss/_variables/breakpoints.scss';
@import '@/assets/scss/_variables/colors.scss';
@import '@/assets/scss/_variables/fonts.scss';
@import '@/assets/scss/_variables/shadows.scss';
@import '@/assets/scss/_variables/easings.scss';
@import '@/assets/scss/_variables/borders.scss';

@import '@/assets/scss/_functions/vertical-rhythm.scss';

@import '@/assets/scss/_mixins/aspect-ratios.scss';
@import '@/assets/scss/_mixins/line-height.scss';
@import '@/assets/scss/_mixins/breakpoints.scss';
@import '@/assets/scss/_mixins/clearfix.scss';
@import '@/assets/scss/_mixins/scale-interaction.scss';
@import '@/assets/scss/_mixins/linear-gradients.scss';
@import '@/assets/scss/_mixins/remove-button.scss';
@import '@/assets/scss/_mixins/arrow.scss';
@import '@/assets/scss/_mixins/chev.scss';
@import '@/assets/scss/_mixins/link.scss';
@import '@/assets/scss/_mixins/external-link.scss';

Versions

• nuxt: 3.0.0-rc.11
• node: 14

Reproduction link https://codesandbox.io/p/github/functionandform/nuxt-sanity-boilerplate/draft/nameless-bash

[toddpadwick]

Turns out @zhoneyboo was correct – updating to RC13 fixes this – however, I had not updated all other dependencies so might not have initially fixed it. had to upgrade all my packages for it to work.

@brokenfiles although your suggestion worked in the interim, I would recommend removing it as with me, I discovered it meant my CSS was being compiled twice, doubling the size of the payload.

the following should work now:

css:[
		"@/assets/scss/main.scss" // contains all global styles
	],
	vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "@/assets/scss/tools.scss" as *;' // contains just variables/mixins/functions needed for components and global styles ( do not include any compilable css)
                },
            },
        },
    },

@danielroe this can be closed. thank you!

[toddpadwick]

Thanks @waysagency at least i now know its not just bad code on my part. But its making me worried that I adopted nuxt 3 too early for a client project. I thought as it was so near to full release that it would be okay and really didn’t want to be stuck with Vue 2 for any new projects.