我正在学习反应，目前在项目中使用引导程序配置scss时遇到了问题，该项目最初是由我的朋友构建的，现在我要进行此工作。当我将其配置为引导时，它工作正常。但是，当我尝试配置scss时，出现以下类型错误。

1 ）这是终端错误

ERROR in ./client/styles/styles.scss
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
| @import '~bootstrap/scss/bootstrap.scss';
| $btn-font-weight:bold;
|
 @ ./client/App.js 17:0-31
 @ ./client/main.js
 @ multi react-hot-loader/patch webpack-hot-middleware/client?reload=true ./client/main.js

2 /这是我的webpack.config文件：

const path = require('path')
const webpack = require('webpack')
const CURRENT_WORKING_DIR = process.cwd()

const config = {
    name: "browser",mode: "development",devtool: 'eval-source-map',entry: [
        'react-hot-loader/patch','webpack-hot-middleware/client?reload=true',path.join(CURRENT_WORKING_DIR,'client/main.js')
    ],output: {
        path: path.join(CURRENT_WORKING_DIR,'/dist'),filename: 'bundle.js',publicPath: '/dist/'
    },module: {
        rules: [
            {
                test: /\.jsx?$/,exclude: /node_modules/,use: [
                    'babel-loader'
                ]
            },{
                test: /\.css$/,use: [
                    'style-loader','css-loader'
                ]

            },{
                test: /\.scss$/,loaders: [ 'style-loader','css-loader','sass-loader' ]
            },{
                test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,use: 'file-loader'
            }
        ]
    },plugins: [
          new webpack.HotModuleReplacementPlugin(),new webpack.NoEmitOnErrorsPlugin()
      ]
}

module.exports = config

3 ）这是我的app.js文件

import React from 'react'
import MainRouter from './MainRouter'
import {BrowserRouter} from 'react-router-dom'
import './styles/styles.scss';
import { hot } from 'react-hot-loader';


const App = () => (
  <BrowserRouter>
    <MuiThemeProvider>
      <MainRouter/>
    </MuiThemeProvider>
  </BrowserRouter>
)

export default hot(module)(App)