sass-loader in Nuxt 2 is removing `@container`. How can I force it to keep it?

42 Views Asked by At

I am creating an app using Nuxt 2. I am using sass-loader v.10.3.1 and Webpack 4 – I cannot use more recent versions as Nuxt 2 does not support sass-loader from v.11.

In my SCSS is use the following code:

@container (min-width: 25rem) 
    { 
        &__blockquote {
            grid-template-columns: 1fr 2fr;
        } 
     } 

On my dev version this works absolutely fine. However, once compiled for prod, sass-loader removes the container part and just applies grid-template-columns: 1fr 2fr;.

I'm wondering whether there is some kind of comment type code I can wrap around / put before the @container code block that forces it to be included even when sass-loader thinks it shouldn't. Hypothetically, something like this below whereby the comment //sass indicates to sass-loader that the immediately following code block should be compiled even if typically it would omit it:

//sass
@container (min-width: 25rem) {
    &__blockquote {
        grid-template-columns: 1fr 2fr;
    } 
}

I have tried updating sass-loader to a more recent version but, as stated, Nuxt 2 is not compatible so that didn't work (I discovered that in this stack overflow answer about setting up sass-loader in nuxt). Beyond that I have searched online, including here in SO, and checked the sass-loader docs but have been unable to find a solution.

0

There are 0 best solutions below