如何在React和Webpack中使用Sass-loader？

我正在使用React 16，Webpack 3和Bootstrap 4 beta。

我正在尝试使用类似于以下内容将.scss文件加载到React中import styles from './styles/app.scss'。目前我正在使用import style from 'style-loader!css-loader!sass-loader!applicationStyles';。我想不再使用.js文件中的sass-loader。

改善我的webpack配置的任何帮助也将受到欢迎，因为那是一团糟...

这是我的webpack文件：

const webpack = require('webpack');
const path = require('path');
const envFile = require('node-env-file');
require('babel-polyfill');


process.env.NODE_ENV = process.env.NODE_ENV || 'development';

try {
  envFile(path.join(__dirname, 'config/' + process.env.NODE_ENV + '.env'))
} catch (e) { }

module.exports = {
  entry: [
    'script-loader!jquery/dist/jquery.min.js',
    'babel-polyfill',
    'whatwg-fetch',
    './app/app.jsx',
  ],
  externals: {
    jQuery: 'jQuery'
  },
  plugins: [
    new webpack.ProvidePlugin({
      '$': 'jQuery',
      'jQuery': 'jQuery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default'],
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } }),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
        API_KEY: JSON.stringify(process.env.API_KEY),
        API_DOMAIN: JSON.stringify(process.env.API_DOMAIN),
        API_FILE_DOMAIN: JSON.stringify(process.env.API_FILE_DOMAIN),
      }
    }),
  ],
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  resolve: {
    modules: [
      __dirname,
      'node_modules',
      './app/api',
      './app/constants',
    ],
    alias: {
      applicationStyles: 'app/styles/app.scss'
    },
    extensions: ['.js', '.jsx']
  },
  devServer: { historyApiFallback: { index: 'public/index.html' }, },
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/
      },
      // {
      //   loader: 'sass-loader',
      //   options: {
      //     includePaths: [ path.resolve(__dirname, './node_modules/bootstrap/scss')]
      //   },
      //   test: /\.scss?$/,
      // },
      {
        loader: 'css-loader',
        options: {
          includePaths: [path.resolve(__dirname, './node_modules/react-table/react-table.css')]
        },
        test: /\.css?$/,
      }
    ],
    // I tried this but it gave me an error
    // rules:[
    //   {
    //       test: /\.scss$/,
    //       use: [
    //         { loader: "style-loader" },
    //         { loader: "css-loader" },
    //         { loader: "sass-loader" }
    //       ]
    //    }
    // ],
  },
  devtool: process.env.NODE_ENV === 'production' ? undefined : 'eval-source-map'
};

这是我的App.jsx文件中的导入

import 'bootstrap'
import style from 'style-loader!css-loader!sass-loader!applicationStyles';
import 'style-loader!react-table/react-table.css';