Webpack: SCSS Styles doesn't preload in dev

[proskurindima]

Environment

Local:

• Operating System: Linux
• Node Version: v14.17.1
• Nuxt Version: 3-3.0.0-27234503.d5127e9
• Package Manager: Yarn
• Bundler: Webpack
• User Config: modules, styleResources, css
• Runtime Modules: @nuxtjs/style-resources@1.2.1
• Build Modules: -

---

Also reproduces in CodeSandbox

Describe the bug

When I use SCSS with Webpack, styles doesn't preload.
You can see it in codeSanbox

Reproduction

1. Add node-sass, sass and sass-loader packages in your package.json
2. Disable Vite in nuxt.config file. vite=false
3. Add some styles in <style> tag with attr lang="scss". For example:

<style lang="scss">
.test {
  font-size: 24px;
  font-family: sans-serif;
}
</style>

4. Reload page
5. See, that styles doesn't preload. They've applied after small delay

Additional context

I've reproduced this error in codeSanbox.

Also, this problem happens with Vite. There is one more ticket

Logs

No response

[hputzek]

I can confirm:

SCSS Styles doesn't preload in dev

same for me

---

• Operating System: Darwin
• Node Version: v14.16.1
• Nuxt Version: 3.0.0-27244105.2256b2b
• Package Manager: npm
• Bundler: Vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

[danielroe]

At the moment inlining styles is not supported for webpack + vue-loader: vuejs/vue-style-loader#56.

[danielroe]

This is no longer reproducible for me. Let me know if not and I'll happily reopen.