Javascript Css未与webpack一起加载

我无法使用webpack加载我的样式-我有几个

.scss

文件，webpack应该将它们编译成

.css

文件并生成JS输出文件。文件生成正确，但是

.css

文件不在那里。我的配置可能有什么问题

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')

const DIST_DIR = path.resolve(__dirname, 'dist');
const APP_DIR = path.resolve(__dirname, 'src');

const sassLoaders = [
    'css-loader',
    'sass-loader?indentedSyntax=sass&includePaths[]=' + DIST_DIR
]

const config = {
    entry: {
        app: [APP_DIR + '/index.js']
    },
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                include: APP_DIR,
                loaders: ['babel']
            },
            {
                test: /\.scss$/,
                include: DIST_DIR,
                loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
            }
        ]
    },
    output: {
        filename: 'js/bundle.js',
        path: DIST_DIR
    },
    plugins: [
        new ExtractTextPlugin('[name].css')
    ],
    resolve: {
        extensions: ['', '.js', '.scss'],
        root: [APP_DIR]
    }
}

module.exports = config

文件结构：

dist
 - css
   - style.scss
 - js
src
 - index.js

---

尝试将SCSS文件的模块加载程序更改为：

{ test: /\.s[ac]ss(\?|$)/, loaders: ['style', 'css', 'sass'] }

---

您应该匹配

.scss

扩展名，而不是

.sass

。尝试将您的

测试

键更改为

/\.scss$/

当然，只是一个输入错误，在我的情况下它不会改变任何东西。