Webpack 3 не работает компиляция scss

const path = require('path'); const ExtractTextPlugin = require ('extract-text-webpack-plugin');
module.exports = { context: __dirname,
entry : { common: './source/js/common.js' },
output: { path: path.resolve(__dirname, './public/js'), filename: '[name].js' },
module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader', 'sass-loader' ] }) } ] },
plugins: [ new ExtractTextPlugin('common.css') ] }
Time: 133ms Asset Size Chunks Chunk Names common.js 2.53 kB 0 [emitted] common [0] ./source/js/common.js 53 bytes {0} [built]
Не генерируется сss файл. Как посмотреть что плагин вообще запускается. Может логер есть какой нибудь?

Ответ

Устанавливаем модуль:
npm i -D extract-text-webpack-plugin
Подключаем:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
Ну и код модуля вынесенный в отдельный файл:
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = function (paths) { return { module: { rules: [ { test: /\.scss$/, include: paths, use: ExtractTextPlugin.extract({ publicPath: '../', fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) }, { test: /\.css$/, include: paths, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) } ] }, plugins: [ new ExtractTextPlugin('./css/[name].css') ] }; };
Соедините с основным конфигом с помощью пакета "webpack-merge". Если же не хотите выносить в отдельный файл то просто подключите в webpack.config.js и вставите:
module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ publicPath: '../', fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) }, { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) } ] }, plugins: [ new ExtractTextPlugin('./css/[name].css') ] };
Ну и не забудьте пути к вашим файлам подкорректировать.