Webpack 3 Bootstrap 4错误@media

我正在尝试使用React，Typescript，Webpack 3和Bootstrap 4来创建一个基本的工作项目 . 当我在主.tsx文件中导入bootstrap.css时，我收到的错误就像Unexpected Symbol - @ - in /node_modules/bootstrap/dist/css/bootstrap.css .

下面是我的webpack.config.js文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        main: './src/app.tsx'
    },
    output: {
        path: path.join(__dirname,'dist'),
        filename: '[name].bundle.js'
    },
    watch:true,
    resolve: {
        extensions: ['.ts','.tsx','.js']
    },
    devServer: {
        contentBase: path.join(__dirname,'dist'),
        port: 3333
    },
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: ['awesome-typescript-loader']
            },
            {
                test: /.html$/,
                use: ['raw-loader']
            },
            {
                test: /\.json$/,
                use: ['json-loader']
            },
            {
                test: /\.(s)css$/,
                exclude: /node_modules/,
                use: ['css-loader','style-loader','sass-loader',{
                    loader: 'postcss-loader', // Run post css actions
                    options: {
                      plugins: function () { // post css plugins, can be exported to postcss.config.js
                        return [
                          require('precss'),
                          require('autoprefixer')
                        ];
                      }
                    }
                  },]
            },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            showErrors: true,
            title: 'React TS Webpack App'
        }),
    ]
}

以下App.tsx文件：

import 'bootstrap/dist/css/bootstrap.css';

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import Greet from './components/Greet';

const techStack = ['React','TypeScript','Webpack','Bootstrap'];
ReactDOM.render(<Greet techs={techStack}/>, document.getElementById('app'));

但我收到以下错误：

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module parse failed: Unexpected character '@' (7:0)
You may need an appropriate loader to handle this file type.
|  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|  */
| @media print {
|   *,
|   *::before,
 @ ./src/app.tsx 1:0-42
 @ multi (webpack)-dev-server/client?http://localhost:3333 ./src/app.tsx

有人可以帮我解决这个错误并让bootsrap和webpack工作吗？