title: "You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"
body: <p>I'm trying to compile my React project, but these errors are popping up:</p>
  <p>Terminal output:</p>
  <blockquote>
  <p>ERROR in ./src/Components/Info.scss 2:0 Module parse failed:
  Unexpected token (2:0) You may need an appropriate loader to handle
  this file type, currently no loaders are configured to process this
  file. See <a href="https://webpack.js.org/concepts#loaders" rel="nofollow noreferrer">https://webpack.js.org/concepts#loaders</a></p>
  </blockquote>
  <pre><code>| // ! Styles for Info.js
  &gt; .wrapper {
  |     display: flex;
  |     flex-direction: column;
   @ ./src/Components/Info.js 2:0-21
   @ ./src/Components/App.js 30:0-26 48:465-469
   @ ./src/index.js 7:0-38 8:50-53
  </code></pre>
  <blockquote>
  <p>ERROR in ./src/Components/main-style.scss 2:0 Module parse failed:
  Unexpected character '@' (2:0) You may need an appropriate loader to
  handle this file type, currently no loaders are configured to process
  this file. See <a href="https://webpack.js.org/concepts#loaders" rel="nofollow noreferrer">https://webpack.js.org/concepts#loaders</a></p>
  </blockquote>
  <pre><code>| /*  Roboto */
  &gt; @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,300&amp;display=swap');
  |
  | * {
   @ ./src/Components/App.js 26:0-27
   @ ./src/index.js 7:0-38 8:50-53
  </code></pre>
  <p>Apparently, something is wrong with my SASS loaders, however I have no idea how to fix this...</p>
  <p>My webpack.config.js:</p>
  <pre><code>const HtmlWebpackPlugin = require(&quot;html-webpack-plugin&quot;);
  const path = require(&quot;path&quot;);
  const isDevelopment = process.env.NODE_ENV === 'development'
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  
  module.exports = {
    entry: &quot;./src/index.js&quot;,
    output: {
      filename: &quot;bundle.[hash].js&quot;,
      path: path.resolve(__dirname, &quot;dist&quot;),
    },
    mode: 'development',
    plugins: [
      new HtmlWebpackPlugin({
        template: &quot;./src/index.html&quot;,
      }),
      new MiniCssExtractPlugin({
              filename: isDevelopment ? '[name].css' : '[name].[hash].css',
              chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
            })
    ],
    resolve: {
      modules: [__dirname, &quot;src&quot;, &quot;node_modules&quot;],
      extensions: [&quot;*&quot;, &quot;.js&quot;, &quot;.jsx&quot;, &quot;.tsx&quot;, &quot;.ts&quot;, &quot;.scss&quot;],
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: require.resolve(&quot;babel-loader&quot;),
        },
        {
          test: /\.css$/,
          use: [&quot;style-loader&quot;, &quot;css-loader&quot;],
        },
        {
          test: /\.png|svg|jpg|gif$/,
          use: [&quot;file-loader&quot;],
        },
        {
          test: /\.(woff|woff2|eot|ttf|svg)$/,
          exclude: /node_modules/,
          loader: 'file-loader',
          options: {
            limit: 1024,
            name: '[name].[ext]',
            publicPath: 'dist/assets/',
            outputPath: 'dist/assets/'
          }
        },
      ],
    },
  };
  </code></pre>
  <p>package.json :</p>
  <pre><code>{
    &quot;name&quot;: &quot;finally&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;webpack serve --hot --open&quot;,
      &quot;build&quot;: &quot;webpack --config webpack.config.js --mode production&quot;
    },
    &quot;keywords&quot;: [],
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;dependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.14.3&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.14.2&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.13.13&quot;,
      &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^5.3.1&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;css-loader&quot;: &quot;^5.2.5&quot;,
      &quot;file-loader&quot;: &quot;^6.2.0&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;^1.6.0&quot;,
      &quot;node-sass&quot;: &quot;^6.0.0&quot;,
      &quot;sass&quot;: &quot;^1.34.0&quot;,
      &quot;sass-loader&quot;: &quot;^11.1.1&quot;,
      &quot;style-loader&quot;: &quot;^2.0.0&quot;,
      &quot;webpack&quot;: &quot;^5.37.1&quot;,
      &quot;webpack-cli&quot;: &quot;^4.7.0&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.11.2&quot;
    }
  }
  </code></pre>
  <p>Here's a full terminal output:</p>
  <pre><code>i ｢wds｣: Project is running at http://localhost:8080/
  i ｢wds｣: webpack output is served from /
  i ｢wds｣: Content not from webpack is served from D:\Web-Development\ScandiWeb\finally
  i ｢wdm｣: wait until bundle finished: /
  (node:10768) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
  (Use `node --trace-deprecation ...` to show where the warning was created)
  × ｢wdm｣: assets by path *.png 28.9 KiB
    asset 7fc5201146bcbca270274ca8064944e8.png 16.5 KiB [emitted] [immutable] [from: src/Components/Images/left-arrow.png] (auxiliary name: main)
    asset 6ab976a0f3ae89bc5c8a10262caeeb84.png 12.4 KiB [emitted] [immutable] [from: src/Components/Images/right-arrow.png] (auxiliary name: main)
  asset bundle.d8670388d44e7af900a1.js 1.42 MiB [emitted] [immutable] (name: main)
  asset index.html 458 bytes [emitted]
  runtime modules 29.6 KiB 15 modules
  modules by path ./node_modules/ 1.29 MiB 34 modules
  modules by path ./src/ 18.2 KiB
    modules by path ./src/Components/ 16.3 KiB
      modules by path ./src/Components/*.js 13 KiB 4 modules
      modules with errors 3.08 KiB [errors] 2 modules
      modules by path ./src/Components/Images/*.png 160 bytes 2 modules
    modules by path ./src/*.css 1.61 KiB
      ./src/index.css 1.32 KiB [built] [code generated]
      ./node_modules/css-loader/dist/cjs.js!./src/index.css 298 bytes [built] [code generated]
    ./src/index.js 315 bytes [built] [code generated]
  
  ERROR in ./src/Components/Info.scss 2:0
  Module parse failed: Unexpected token (2: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
  | // ! Styles for Info.js
  &gt; .wrapper {
  |     display: flex;
  |     flex-direction: column;
   @ ./src/Components/Info.js 2:0-21
   @ ./src/Components/App.js 30:0-26 48:465-469
   @ ./src/index.js 7:0-38 8:50-53
  
  ERROR in ./src/Components/main-style.scss 2:0
  Module parse failed: Unexpected character '@' (2: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
  | /*  Roboto */
  &gt; @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,300&amp;display=swap');
  |
  | * {
   @ ./src/Components/App.js 26:0-27
   @ ./src/index.js 7:0-38 8:50-53
  
  webpack 5.37.1 compiled with 2 errors in 8467 ms
  i ｢wdm｣: Failed to compile.
  </code></pre>
  <p>Does anyone have any idea on why this can occur?</p>