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.