Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS Modules don't work in a SFC component (app-webpack v4) #17886

Open
berdyshev opened this issue Mar 6, 2025 · 0 comments
Open

CSS Modules don't work in a SFC component (app-webpack v4) #17886

berdyshev opened this issue Mar 6, 2025 · 0 comments
Labels
area/cli bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-webpack kind/bug 🐞 Qv2 🔝 Quasar v2 issues

Comments

@berdyshev
Copy link

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

https://stackblitz.com/edit/quasarframework-stackblitz-templates-w5jer7y2?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

  1. Go to the reproduction project
  2. Open the IndexPage.vue file
  3. Find the following element in the start of the template <div :class="$style.box"></div>
  4. Find the style at the bottom of the file 
    <style lang="scss" module>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>
  5. Check the preview — there is no red box just before the logo on the page
  6. Check to source code — there is a <div class></div> element but without the class appended
  7. Check the <head> element and find that the styles for the .IndexPage_box_pK3Vl has 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.104

Relevant log output



Additional context


No response

      		
    

      
  





        



            

              
            

        

      


      
    








      

    



      

  
            

    

      
    

    


      

          @berdyshev
berdyshev




            added
      

  kind/bug 🐞


      

  Qv2 🔝

  Quasar v2 issues

  labels


      Mar 6, 2025

    

  



    

    

      
    

    


      

          @github-actions
github-actions
bot



            added
      

  area/cli


      

  bug/1-repro-available

  A reproduction is available and needs to be confirmed.

      

  flavour/quasar-cli-webpack


  labels


      Mar 6, 2025

    

  












  
  

    

      

  





  




  
  

              

  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment


  



  






  
                  




    

  


      
  

    Assignees
  



        

    No one assigned







      


  


  

    Labels
  



    

      

    area/cli

  

    bug/1-repro-available

  A reproduction is available and needs to be confirmed.
  

    flavour/quasar-cli-webpack

  

    kind/bug 🐞

  

    Qv2 🔝

  Quasar v2 issues








      

  

    

        

    Projects
  


        




    None yet




  



      


  

    
  

    Milestone
  


      No milestone





    
      
          


  

    

      
        

          
    

    Development
  




            
    
No branches or pull requests







      
    

  




      

    

  
      

  

    

      1 participant
    

    

        
          @berdyshev