title: how can I solve this problem? `You may need an appropriate loader to handle this file type.` scss react
body: <p>I wanna to use GoGO template in React, but i have this problem.</p>
  
  <pre><code>Uncaught Error: Module parse failed: Unexpected token (29:12)
  You may need an appropriate loader to handle this file type.
  | 
  | var render = function render() {
  &gt;   var css = import('./assets/css/sass/themes/gogo.' + color + '.scss').then(function (x) {
  |     var MainApp = require('./App').default;
  | 
      at eval (index.js:1)
      at Object../src/index.js (main.f444d441.js:6169)
      at __webpack_require__ (main.f444d441.js:724)
      at fn (main.f444d441.js:101)
      at eval (webpack:///multi_(:3005/webpack)-dev-server/client?:5:18)
      at Object.0 (main.f444d441.js:6180)
      at __webpack_require__ (main.f444d441.js:724)
      at main.f444d441.js:791
      at main.f444d441.js:794
  </code></pre>
  
  <p>I tried different approuch but I can't solved this problem.</p>
  
  <p>This is a link to source code page.
  <a href="https://themeforest.net/item/gogo-react-bootstrap-4-admin-dashboard/22544383/comments?page=5" rel="nofollow noreferrer">https://themeforest.net/item/gogo-react-bootstrap-4-admin-dashboard/22544383/comments?page=5</a></p>
  
  <p>webpack.config.js</p>
  
  <pre><code>'use strict';
  
  /**
   * Webpack Config
   */
  const path = require('path');
  const fs = require('fs');
  const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
  // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  
  // Webpack uses `publicPath` to determine where the app is being served from.
  // In development, we always serve from the root. This makes config easier.
  const publicPath = '/';
  
  // Make sure any symlinks in the project folder are resolved:
  const appDirectory = fs.realpathSync(process.cwd());
  const resolveApp = relativePath =&gt; path.resolve(appDirectory, relativePath);
  
  // plugins
  const HtmlWebPackPlugin = require("html-webpack-plugin");
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
  const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
  
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  
  // the path(s) that should be cleaned
  let pathsToClean = [
      'dist',
      'build'
  ]
  
  // the clean options to use
  let cleanOptions = {
      root: __dirname,
      verbose: false, // Write logs to console.
      dry: false
  }
  
  module.exports = {
      entry: ["babel-polyfill", "react-hot-loader/patch", "./src/index.js"],
      output: {
          // The build folder.
          path: resolveApp('dist'),
          // Generated JS file names (with nested folders).
          // There will be one main bundle, and one file per asynchronous chunk.
          // We don't currently advertise code splitting but Webpack supports it.
          filename: 'assets/js/[name].[hash:8].js',
          chunkFilename: 'assets/js/[name].[hash:8].chunk.js',
          // We inferred the "public path" (such as / or /my-project) from homepage.
          publicPath: publicPath,
          hotUpdateChunkFilename: 'hot/hot-update.js',
          hotUpdateMainFilename: 'hot/hot-update.json'
      },
      devServer: {
          contentBase: './src/index.js',
          compress: true,
          port: 3005, // port number
          historyApiFallback: true,
          quiet: true
      },
      // resolve alias (Absolute paths)
      resolve: {
          alias: {
              Components: path.resolve(__dirname, 'src/components/'),
              Containers: path.resolve(__dirname, 'src/containers/'),
              Assets: path.resolve(__dirname, 'src/assets/'),
              Util: path.resolve(__dirname, 'src/util/'),
              Routes: path.resolve(__dirname, 'src/routes/'),
              Constants: path.resolve(__dirname, 'src/constants/'),
              Redux: path.resolve(__dirname, 'src/redux/'),
              Data: path.resolve(__dirname, 'src/data/')
          }
      },
      module: {
          rules: [
              {
                  test: /\.(js|jsx)$/,
                  exclude: /node_modules/,
                  use: {
                      loader: "babel-loader"
                  }
              },
              {
                  test: /\.html$/,
                  use: [
                      {
                          loader: "html-loader",
                          options: { minimize: true }
                      }
                  ]
              },
              {
                  test: /\.css$/,
                  use: [MiniCssExtractPlugin.loader, "css-loader"]
              },
              // Scss compiler
              {
                  test: /\.scss$/,
                  use: [
                      MiniCssExtractPlugin.loader,
                      "css-loader",
                      "sass-loader",
                      "style-loader",
                      // "postcss-loader"
                  ]
              },
              // {
              //     test: /\.scss$/,
              //     use: ExtractTextPlugin.extract({
              //         use: [{
              //             loader: "css-loader"
              //         }, {
              //             loader: "sass-loader"
              //         }],
              //         fallback: "style-loader"
              //     })
              // }
  
              // {
              //     test: /\.scss$/,
              //     use: [
              //         'style-loader',
              //         'css-loader',
              //         'postcss-loader',
              //         'sass-loader',
              //         'postcss-loader'
              //         {
              //             loader: 'sass-resources-loader',
              //             options: {
              //                 // Provide path to the file with resources
              //                 resources: 'src/assets/css/sass/themes/gogo.light.purple.scss',
              //
              //                 // Or array of paths
              //                // resources: ['./path/to/vars.scss', './path/to/mixins.scss']
              //             },
              //         },
              //     ],
              // },
          ]
      },
      optimization: {
          minimizer: [
              new UglifyJsPlugin({
                  cache: true,
                  parallel: true,
                  uglifyOptions: {
                      compress: false,
                      ecma: 6,
                      mangle: true
                  },
                  sourceMap: true
              }),
              new OptimizeCSSAssetsPlugin({})
          ]
      },
      performance: {
          hints: process.env.NODE_ENV === 'production' ? "warning" : false
      },
      plugins: [
          new CopyWebpackPlugin([
              {from:'src/assets/img',to:'assets/img'},{from:'src/assets/fonts',to:'assets/fonts'}
          ]), 
          new FriendlyErrorsWebpackPlugin(),
          new CleanWebpackPlugin(pathsToClean, cleanOptions),
          new HtmlWebPackPlugin({
              template: "./public/index.html",
              filename: "./index.html",
              favicon: './public/favicon.ico'
          }),
          new MiniCssExtractPlugin({
              filename: "assets/css/[name].[hash:8].css"
          })
      ]
  };
  
  </code></pre>
  
  <p>package.json</p>
  
  <pre><code>{
    "name": "gogo-react",
    "version": "2.0.2",
    "description": "Gogo - React Bootstrap 4 Admin Dashboard Template",
    "scripts": {
      "start": "webpack-dev-server --mode development --hot --progress --open",
      "build": "webpack --mode production"
    },
    "keywords": [
      "reactjs"
    ],
    "author": "Colored Strategies",
    "license": "ISC",
    "devDependencies": {
      "babel-core": "^6.26.0",
      "babel-eslint": "^7.2.3",
      "babel-loader": "^7.1.4",
      "babel-polyfill": "^6.26.0",
      "babel-preset-env": "^1.6.1",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-2": "^6.24.1",
      "clean-webpack-plugin": "^0.1.19",
      "copy-webpack-plugin": "^4.5.2",
      "css-loader": "^2.0.0",
      "eslint": "^4.19.1",
      "eslint-config-react-app": "^2.1.0",
      "eslint-plugin-flowtype": "^2.47.1",
      "eslint-plugin-import": "^2.12.0",
      "eslint-plugin-jsx-a11y": "^5.1.1",
      "eslint-plugin-react": "^7.8.2",
      "extract-text-webpack-plugin": "^3.0.2",
      "file-loader": "^1.1.11",
      "friendly-errors-webpack-plugin": "^1.7.0",
      "html-loader": "^0.5.5",
      "html-webpack-plugin": "^3.2.0",
      "mini-css-extract-plugin": "^0.5.0",
      "node-sass": "^4.8.3",
      "optimize-css-assets-webpack-plugin": "^5.0.1",
      "react": "^16.3.1",
      "react-dom": "^16.3.1",
      "react-hot-loader": "^4.1.3",
      "sass-loader": "^7.1.0",
      "uglifyjs-webpack-plugin": "^1.2.5",
      "url-loader": "^1.0.1",
      "webpack": "^4.27.1",
      "webpack-bundle-analyzer": "^2.11.1",
      "webpack-cli": "^3.1.2",
      "webpack-dev-server": "^3.1.10"
    },
    "dependencies": {
      "@date-io/moment": "0.0.2",
      "availity-reactstrap-validation": "^2.0.4",
      "axios": "^0.18.0",
      "chart.js": "^2.7.2",
      "chartjs-plugin-datalabels": "^0.3.0",
      "classnames": "2.2.6",
      "draft-js": "^0.10.5",
      "fine-uploader": "^5.16.2",
      "firebase": "^5.3.0",
      "formik": "^1.5.4",
      "install": "^0.12.2",
      "jalali-moment": "^3.3.1",
      "jwt-decode": "^2.2.0",
      "material-ui": "^0.20.2",
      "material-ui-persian-date-picker-utils": "^0.1.2",
      "material-ui-pickers": "^2.0.4",
      "moment": "^2.22.2",
      "npm": "^6.5.0",
      "postcss-loader": "^3.0.0",
      "rc-slider": "^8.6.1",
      "rc-switch": "^1.6.0",
      "react": "^16.4.1",
      "react-autosuggest": "^9.3.4",
      "react-big-calendar": "^0.19.2",
      "react-block-ui": "^1.1.3",
      "react-chartjs-2": "^2.7.4",
      "react-circular-progressbar": "^1.0.0",
      "react-contextmenu": "^2.9.4",
      "react-datepicker": "^1.5.0",
      "react-dom": "^16.4.1",
      "react-fine-uploader": "^1.1.0",
      "react-headroom": "^2.2.4",
      "react-intl": "2.4.0",
      "react-lines-ellipsis": "^0.13.2",
      "react-loadable": "5.4.0",
      "react-mousetrap": "^0.2.0",
      "react-perfect-scrollbar": "^1.1.1",
      "react-quill": "^1.3.1",
      "react-rater": "^5.0.3",
      "react-redux": "5.0.7",
      "react-router-dom": "^4.2.2",
      "react-scroll-to-component": "^1.0.2",
      "react-select": "^2.0.0-beta.7",
      "react-sortablejs": "^1.3.6",
      "react-table": "^6.8.6",
      "react-tagsinput": "^3.19.0",
      "react-transition-group": "^1.2.0",
      "reactstrap": "^6.5.0",
      "redux": "4.0.0",
      "redux-saga": "^0.16.0",
      "sass-resources-loader": "^2.0.0",
      "sortablejs": "^1.6.1",
      "style-loader": "^0.23.1",
      "sweetalert2": "^8.8.7",
      "video.js": "^7.3.0",
      "yup": "^0.27.0"
    }
  }
  
  </code></pre>
  
  <p>Please help me, thanks in advance.</p>