Webpack sass где css файл

Я использую веб-пакет с загрузчиком sass следующим образом:

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: "style!css!sass"
      }
    ]
  }
};

Но я вижу, что стили применяются к тегу стиля, где находится файл css для генерации?

Ответы

Ответ 1

По умолчанию загрузчик стиля строит скомпилированный css в ваш пакет, который добавляется в голову страницы с выходным файлом, например. bundle.js. Используя extract-text-webpack-plugin, вы можете удалить скомпилированный css из пакета и экспортировать его в отдельный файл.

Сначала - оберните ваш загрузчик в плагин:

 loaders: [{
  test: /\.scss$/,
  loader: ExtractTextPlugin.extract(
    "style",
    "css!sass")
 }]
},

Затем скажите плагину, что вызвать файл, который он создает:

plugins: [
    new ExtractTextPlugin("app.css")
 ]

Включайте этот файл в свой HTML как обычно.

Ответ 2

Если вам нужен отдельный файл CSS при использовании Webpack, вам нужно использовать extract-text-webpack-plugin.