使用webpack将.scss解压缩到css

我正在尝试将所有我的sass文件编译到一个style.css文件中， 如下所示 。 我安装了我的npm install --save-dev extract-text-webpack-plugin并且在我的webpack.config.dev.js中是下面的。

 const path = require('path'); const webpack = require('webpack'); const WebpackNotifierPlugin = require('webpack-notifier'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = { devtool: 'eval', entry: [ './src', ], output: { path: path.join(__dirname, 'dist'), filename: 'app.js', publicPath: '/', }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new WebpackNotifierPlugin({ title: 'My Project Build' }), new ExtractTextPlugin('public/style.css', { allChunks: true, }), ], module: { loaders: [{ test: /\.js$/, loader: 'babel-loader', include: path.join(__dirname, 'src'), }, { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass'), include: path.join(__dirname, 'public/sass'), }, { test: /\.js$/, loader: 'eslint-loader', include: path.join(__dirname, 'src'), }], }, }; 

在我的公共文件夹中，我添加了另一个文件夹sass和一个单一的body.scss文件进行testing。

 .first-component { .text { font-size: 1.4rem; } .button { font-size: 1.7rem; } } 

当我运行节点server.js我期待我的body.scss我写在我的空style.css。 我的server.js如下。

 const path = require('path'); const express = require('express'); const webpack = require('webpack'); const config = require('./webpack.config.dev'); const app = express(); const compiler = webpack(config); app.use(require('webpack-dev-middleware')(compiler, { noInfo: true, publicPath: config.output.publicPath, })); app.use(require('webpack-hot-middleware')(compiler)); app.use('/', express.static('public')); app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'public/index.html')) ); app.listen(3030, 'localhost', err => { if (err) { console.log(err); return; } console.log('Listening at http://localhost:3030'); }); 

我的webpack在节点server.js上执行。 但是，我的style.css文件仍然是空的。 我尽一切努力无济于事。 请问我错过了什么，我如何解决这个问题？