无法生成CSS文件sass-loader webpack

Question

我正在尝试使用sass-loader来转换SCSS文件到css(需要有物理文件)。正在应用样式，但无法查看生成的.css文件。

//webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname + '/public',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: __dirname + '/public'
    },
    module: {
      loaders: [
          {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
          {test: /\.scss$/, loader: ExtractTextPlugin.extract('css-loader!sass-loader')}
      ]
    },
    plugins: [
       new ExtractTextPlugin("style.css")
   ]
}

完整的源代码可在github repo上找到

Answer 1

我看过源代码了。我敢肯定这是因为你仍然在使用webpack version 1语法，但你安装的是webpack v2。Webpack2的语法与以前的版本不同。

使用webpack v2时，您的webpack.config.js将如下所示：

module: {
        rules: [ // from 'loaders' to 'rules'
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.sass$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract({
                  fallbackLoader: 'style-loader',
                  loader: ['style-loader','sass-loader']
                })
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('bundle.css') // what the output file (css) is going to be
    ]

希望这能有所帮助。