Как компилировать scss в разные файлы с помощью webpack?

Question

[Eugene Kubesh]

Всем привет. Я хочу решить достаточно простую задачу на первый взгляд – компилировать 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 файлов как-то так

Но я не могу найти аналогичного решения для sass

На данный момент интересует именно решение вебпаком, без галпа.

Comments

[Алексей Немиро]

Возможно extract-text-webpack-plugin.
Что-то типа:
new ExtractTextPlugin({filename: '[name].css'});
И скорее всего с chunks придется повозиться.

Answer 1

[qtuz]

Попробуйте extract-loader:

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