Adding multiple SCSS files with webpack from subdirectories

[beauvoir]

Hi,

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 :

-blocks
–subdirectory1
—style.scss
–subdirectory2
—style.scss

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": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/test",
  "devUrl": "https://test.lndo.site",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php",
    "resources/views/blocks/**/style.scss"
  ]
}

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.

[karel]

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 …