css 没有用 webpack 加载

Question

我无法使用 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

Answer 1

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

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