Я использую веб-пакет с загрузчиком sass следующим образом:
module.exports = {
module: {
loaders: [
{
test: /\.scss$/,
loader: "style!css!sass"
}
]
}
};
Но я вижу, что стили применяются к тегу стиля, где находится файл css для генерации?
По умолчанию загрузчик стиля строит скомпилированный css в ваш пакет, который добавляется в голову страницы с выходным файлом, например. bundle.js. Используя extract-text-webpack-plugin, вы можете удалить скомпилированный css из пакета и экспортировать его в отдельный файл.
Сначала - оберните ваш загрузчик в плагин:
loaders: [{
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
"style",
"css!sass")
}]
},
Затем скажите плагину, что вызвать файл, который он создает:
plugins: [
new ExtractTextPlugin("app.css")
]
Включайте этот файл в свой HTML как обычно.
Если вам нужен отдельный файл CSS при использовании Webpack, вам нужно использовать extract-text-webpack-plugin.