javascript - 使用 webpack 2 将 .scss 文件提取到 .css

Question

我需要将 .scss 文件转换为指定文件夹中的 .css 文件。我使用 extract-text-webpack-plugin 来提取文件，但它没有用。

这是我的webpack.config.js

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

var env = process.env.NODE_ENV
var config = {
  entry: path.join(__dirname, 'src/index.js'),
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react', ['es2015', { modules: false }], 'stage-0']
          }
        },
        resource: {
          exclude: /(node_modules|bower_components)/,
          test: /.jsx?$/
        }
      }, {
        use: {
          loader: ExtractTextPlugin.extract({
            fallbackLoader: "style-loader",
            loader: "css-loader!sass-loader",
          })
        },
        resource: {
          test: /.scss?$/
        }
      }
    ]
  }
}

switch (env) {
  case 'production':
    Object.assign(config, {
      output: {
        path: path.join(__dirname, 'build'),
        publicPath: 'build',
        filename: 'bundle.min.js'
      },
      devtool: false,
      plugins: [
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('production'),
          '__DEVTOOLS__': false
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false,
            screw_ie8: true
          },
          mangle: false,
          comments: false
        })
      ]
    })
    break

  case 'development':

  default:
    Object.assign(config, {
      output: {
        path: path.join(__dirname, 'build'),
        publicPath: 'build',
        filename: 'bundle.js',
        chunkFilename: '[name].js'
      },
      devtool: 'inline-sourcemap',
      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin('tahu.css')
      ],
      devServer: {
          contentBase: __dirname + '/'
      }
    })
    break
}

module.exports = Object.assign({}, config);

这是我的依赖

"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "2.0.0-beta.5",
"node-sass": "^4.3.0",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "2.2.0-rc.7",

谁能帮帮我？

Answer 1

终于知道为什么没有构建.css文件了。因为我忘记将 .scss 文件引入到我的 .js 文件中。