title: facing lots of trouble while installing semantic UI in react project
body: <p>I am beginner in react and have been trying to install Semantic UI in my react project from yesterday. I have already installed and reinstalled my project multiple times but still not getting it to work. I am using Webstrom IDE, Webpack 4 and Babel for configuration and this is how everything looks:</p>
  
  <p><em>Webpack.config.js</em></p>
  
  <pre><code>const path = require('path')
  const HtmlWebPackPlugin = require('html-webpack-plugin');
  
  module.exports={
      entry: './src/index.js',
      output: {
          path: path.join(__dirname,'/dist'),
          filename: 'index_bundle.js'
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  exclude: /node_modules/,
                  use:{
                      loader: 'babel-loader'
                  }
              },
              {
                  test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                  loader: require.resolve("url-loader"),
                  options: {
                      limit: 10000,
                      name: "static/media/[name].[hash:8].[ext]",
                  },
              },
              {
                  test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/],
                  loader: require.resolve("file-loader"),
                  options: {
                      name: "/static/media/[name].[hash:8].[ext]",
                  },
              }
          ]
      },
      plugins: [
          new HtmlWebPackPlugin({
              template: './src/index.html'
          })
      ]
  }
  </code></pre>
  
  <p><em>Package.json</em></p>
  
  <pre><code>{
    "name": "react",
    "version": "1.0.0",
    "description": "webpack practice",
    "main": "index.js",
    "scripts": {
      "start": "webpack-dev-server --mode development --open --hot",
      "build": "webpack --mode production"
    },
    "author": "me",
    "license": "ISC",
    "devDependencies": {
      "babel-core": "^6.26.3",
      "babel-loader": "^8.0.6",
      "babel-preset-env": "^1.7.0",
      "babel-preset-react": "^6.24.1",
      "file-loader": "^4.0.0",
      "html-webpack-plugin": "^3.2.0",
      "url-loader": "^2.0.1",
      "webpack": "^4.35.2",
      "webpack-cli": "^3.3.5",
      "webpack-dev-server": "^3.7.2"
    },
    "dependencies": {
      "@babel/core": "^7.4.5",
      "@babel/preset-env": "^7.4.5",
      "@babel/preset-react": "^7.0.0",
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "semantic-ui-css": "^2.4.1",
      "semantic-ui-react": "^0.87.2"
    }
  }
  </code></pre>
  
  <p><em>.babelrc</em></p>
  
  <pre><code>{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
  }
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>Problem occurs when I use <code>import 'semantic-ui-css/semantic.min.css'</code> this line in index.js. It throws below mentioned error:</p>
  
  <pre><code>ERROR in ./node_modules/semantic-ui-css/semantic.min.css 11:0
  Module parse failed: Unexpected character '@' (11:0)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https
  ://webpack.js.org/concepts#loaders
  |  *
  |  */
  &gt; @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&amp;subset=latin);/*!
  |  * # Semantic UI 2.4.0 - Reset
  |  * http://github.com/semantic-org/semantic-ui/
   @ ./src/index.js 4:0-42
  Child html-webpack-plugin for "index.html":
       1 asset
      Entrypoint undefined = index.html
      [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 595 bytes {0} [built]
      [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
      [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
      [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
  i ｢wdm｣: Failed to compile.
  </code></pre>
  
  <p><strong>What I tried:</strong></p>
  
  <p>I have tried different solutions so far from adding different configs from file-loader, url-loader to completely reinstalling webpack and following every little guideline shown at <a href="https://react.semantic-ui.com/usage/" rel="nofollow noreferrer">https://react.semantic-ui.com/usage/</a> but I am literally stuck and cannot figure out what's wrong. I never imagined it will be so difficult.</p>