How to compile scss into different files using webpack?

Question

Sass

Всем привет. Я хочу решить достаточно простую задачу на первый взгляд – компилировать scss подключаемые и складывать результат в файлы с таким же названием и путем, но в формате css.
Например:
1) Я нахожусь в /component/subcomponent.js и делаю require('./first-style.scss')
2) Я нахожусь в /module/component.js и я снова делаю require('./second-style.scss')
Я хочу скомпилировать scss -> css и после этого результат сложить с сохранением путей, т.е.:
/public/styles/component/first-style.css и
/public/styles/module/second-style.css
а require должен вернуть новый путь к файлу /public/styles/component/first-style.css
Я решил эту задачу для простых css файлов как-то так
But I can't find a similar solution for sass
. At the moment, I'm interested in the webpack solution, without the gallp.

Answer 1

Try extract-loader :

module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: [
          'file?name=[path][name].[ext]',
          'extract',
          'css',
          'sass'
        ]
      }
    ]
  }