Adding multiple SCSS files with webpack from subdirectories


In my Sage theme I have a directory called ressources/views/blocks. In that directory I have multiple subdirectories. Here is an example of the structure :


I would like to compile all the style.scss contained in those subdirectories to the theme main.css. I would like to compile while running a watch but also when I do a build. For now I added this to my main.scss:

@import "../../views/blocks/**/style.scss";

I also added the last line to my config.json:

  "entry": {
    "main": [
    "customizer": [
  "publicPath": "/app/themes/test",
  "devUrl": "",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [

I would like to know the best way to achieve this, because for now, the browsersync refresh when I make a change in any of the style.scss but it won’t compile and the style won’t show up.

Thanks for your help.

why not to keep your scss files organised in assets folder where webpack can find them, see assets/build/webpack.config.js?

you can use any naming and structure you wish inside this folder also if it helps you …

This topic was automatically closed after 42 days. New replies are no longer allowed.