Sass styles are not loaded when nuxt-windicss is enabled

[abhay-agarwal]

If I enable the nuxt-windicss plugin, my sass styles as defined in the nuxt config css parameter are not loaded. This does not happen if I use a css stylesheet.

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
    modules: ['nuxt-windicss'],
    css: ['~/assets/css/test.sass'],
})

{
  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "preview": "nuxi preview",
    "start": "node .output/server/index.mjs"
  },
  "engines": {
    "node": "16.x"
  },
  "devDependencies": {
    "nuxt": "3.0.0-rc.1",
    "nuxt-windicss": "latest",
    "sass": "latest",
    "sass-loader": "latest",
  },
}

[skizer]

bump - still happens for me

[harlan-zw]

Hey @abhay-agarwal & @skizer

Are you able to provide a reproduction in stackblitz?

I've attempted to replicate the issue and haven't been able to here: https://stackblitz.com/edit/nuxt-3-windicss-ohqssr?file=windi.config.ts

[skizer]

Hey @harlan-zw, thanks for that fast response,
I gotta correct myself, sass itself and on its own is working - sorry!

What specifically is not working and what I was doing is using @apply in a nuxt sfc inside a style tag set to sass lang.

<style lang="sass">
#test
  @apply bg-red-600
</style>

Seems like a nuxt-windicss problem as the vite plugin works flawlessly in that way?

[abhay-agarwal]

Hey @abhay-agarwal & @skizer

Are you able to provide a reproduction in stackblitz?

I've attempted to replicate the issue and haven't been able to here: https://stackblitz.com/edit/nuxt-3-windicss-ohqssr?file=windi.config.ts

I have tried again with the most recent nuxt-windicss and the problem persists. The plugin works in yarn dev mode, but once you yarn build && yarn start the styles are not visible anymore.

[abhay-agarwal]

I should also mention that the latest version I found without this issue is 2.2.8, so it only occurs when I use a later version than that.

[harlan-zw]

Hey guys, apologised for the delay in the response. Took the last month off travelling,

I've been able to replicate the issue. The issue is related to how the Vite plugin handles the order in which to transform CSS.

By default, the Vite plugin transforms CSS after it's been loaded by any pre-processors (sass, less, postcss, etc). This is okay but it means a lot of the styles in the Vue SFC don't work.

To get around this the Nuxt module sets the default transform CSS to happen before the pre-processors transformCSS: 'pre'. This allows users to use @apply in the most common css langs.

You can likely get the @apply working by setting the following, though you may run into other issues.

  windicss: {
    transformCSS: 'post'
  },

The webpack plugin gets around this using pitching to determine the best time to process the styles. This most likely won't get ported to the vite plugin as it's mostly in a maintenance phase at the moment.

Your options would be:

• use scss
• try UnoCSS
• try the above transformCSS and see if it solves it

[huangxg]

sass and scss don't work for me. I have to downgrade to 2.2.8.

[volk234]

SCSS function @each doesn't work when nuxt-windi enabled. This code does nothing;

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
    .icon-#{$size} {
        font-size: #{$size};
        height: #{$size};
        width: #{$size};
    }
}

When windi disabled, it works fine.

[huangxg]

2.2.11 is fine, but sass is not loaded with 2.3.0. It seems that some change in this commit is the cause.