无法生成 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
    ]

希望这会有所帮助。