2

Is it possible to use webpack to compile a directory of scss files to a directory of css files?

I don't want to use the sass command line tool because it's part of an angular project and with the help of custom builders I can run the webpack script with only ng build

e.g.

- src
 - themes
  - theme-dark.scss
  - theme-light.scss

to 

- dist
 - themes
  - theme-light.css
  - theme-dark.css

Hower I think this is currently not possible because webpack seems to need the scss imported in javascript and not in single files and writes the generated files to js and not css.

Is that what I want even possible with webpack or do I need another tool?

  • 1
    If all you want to do is compile scss to css, use [the command-line tool that is mentioned by the Sass documentation](https://sass-lang.com/documentation/cli). I mean, I'm sure webpack can do that, but it's a bit like using a steam-roller to iron a handkerchief; it gets the job done, but damn. – Heretic Monkey Feb 28 '20 at 21:25

1 Answers1

1

You can use Sass compiler to compile scss to css with a single command. Exactly the use-case you are looking for.

sass --watch src/themes:dist/themes

watch will compile on a file change (optional)

Mechanic
  • 5,015
  • 4
  • 15
  • 38
  • 1
    That would be possible, but it requires me to execute the command seperately. I use Angular and webpack could be executed with a single ng build with the help of a custom builder. –  Feb 28 '20 at 21:48
  • 2
    @danielr1996 You either have to import them somewhere so webpack can see them and compile them with a loader, or you should do it manually by customizing your build command in webpack by `&& (anding)` those [two commands](https://stackoverflow.com/questions/8055371/how-do-i-run-two-commands-in-one-line-in-windows-cmd) (e.g. in your webpack commands `"fancy-build" : sass src/themes:dist/themes && ng build` – Mechanic Feb 28 '20 at 22:02
  • 2
    Ok, I thought there would be a more elegant solution inside webpack but it seems webpack just isn't the right tool for that. –  Feb 28 '20 at 22:10