CSS Modules don't work in a SFC component (app-webpack v4) #17886
Description
What happened?
I'm migrating developed with app-webpack from v3 to v4. And I faced issue that in the latest @quasar/app-webpack@4 the SCSS module in the SFC component doesn't work.
What did you expect to happen?
SCSS module should work in the webpack configuration.
That worked with app-webpack v3 and it's working with the app-vite@latest
Reproduction URL
How to reproduce?
- Go to the reproduction project
- Open the IndexPage.vue file
- Find the following element in the start of the template
<div :class="$style.box"></div> - Find the style at the bottom of the file
<style lang="scss" module> .box { width: 100px; height: 100px; background-color: red; } </style>
- Check the preview — there is no red box just before the logo on the page
- Check to source code — there is a
<div class></div>element but without the class appended - Check the
<head>element and find that the styles for the.IndexPage_box_pK3Vlhas been injected
Flavour
Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)
Areas
Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)
Platforms/Browsers
Chrome
Quasar info output
Operating System - Linux(5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36) - linux/x64
NodeJs - 18.20.3
Global packages
NPM - 10.2.3
yarn - 1.22.19
pnpm - 8.15.6
bun - Not installed
@quasar/cli - undefined
@quasar/icongenie - Not installed
cordova - Not installed
Important local packages
quasar - 2.18.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
@quasar/app-webpack - 4.1.2 -- Quasar Framework App CLI with Webpack
@quasar/extras - 1.16.17 -- Quasar Framework fonts, icons and animations
eslint-plugin-quasar - Not installed
vue - 3.5.13 -- The progressive JavaScript framework for building modern web UI.
vue-router - 4.5.0
pinia - Not installed
eslint - 9.21.0 -- An AST-based pattern checker for JavaScript.
esbuild - 0.25.0 -- The cross-platform WebAssembly binary for esbuild, a JavaScript bundler.
typescript - Not installed
@babel/core - 7.26.9 -- Babel compiler core.
webpack - 5.98.0 -- Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
webpack-dev-server - 5.2.0 -- Serves a webpack app. Updates the browser on changes.
workbox-webpack-plugin - Not installed
register-service-worker - Not installed
electron - Not installed
@electron/packager - Not installed
electron-builder - Not installed
@capacitor/core - Not installed
@capacitor/cli - Not installed
@capacitor/android - Not installed
@capacitor/ios - Not installed
Quasar App Extensions
*None installed*
Networking
Host - quasarframeworkstackblitztempl-0iuz
en0 - 192.168.1.104Relevant log output
Additional context
No response