"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"

Question

I'm trying to compile my React project, but these errors are popping up:

Terminal output:

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
> .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 */
> @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,300&display=swap');
|
| * {
 @ ./src/Components/App.js 26:0-27
 @ ./src/index.js 7:0-38 8:50-53

Apparently, something is wrong with my SASS loaders, however I have no idea how to fix this...

My webpack.config.js:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const isDevelopment = process.env.NODE_ENV === 'development'
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.[hash].js",
    path: path.resolve(__dirname, "dist"),
  },
  mode: 'development',
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
            filename: isDevelopment ? '[name].css' : '[name].[hash].css',
            chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
          })
  ],
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts", ".scss"],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: require.resolve("babel-loader"),
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png|svg|jpg|gif$/,
        use: ["file-loader"],
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        exclude: /node_modules/,
        loader: 'file-loader',
        options: {
          limit: 1024,
          name: '[name].[ext]',
          publicPath: 'dist/assets/',
          outputPath: 'dist/assets/'
        }
      },
    ],
  },
};

package.json :

{
  "name": "finally",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --hot --open",
    "build": "webpack --config webpack.config.js --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.2",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "css-loader": "^5.2.5",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^1.6.0",
    "node-sass": "^6.0.0",
    "sass": "^1.34.0",
    "sass-loader": "^11.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}

Here's a full terminal output:

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
> .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 */
> @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,300&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.

Does anyone have any idea on why this can occur?

Solution

You need to add your sass loader in your rules:

rules: [
    {
        test: /\.scss$/,
        use: [
            "style-loader", // 3. Inject styles into DOM
            "css-loader", // 2. Turns css into commonjs
            "sass-loader", // 1. Turns sass into css
        ],
    },
];