title: Module parse failed: Unexpected character '@' (1:0) - You may need an appropriate loader to handle this file type
body: <p>When running <code>npm start</code>, webpack is throwing an error:</p>
  <pre><code>ERROR in ./src/style/main.less 1:0
  Module parse failed: Unexpected character '@' (1: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 &quot;header.less&quot;;
  | @color: #f5adad;
  | body {
   @ ./src/index.js 1:0-27
  </code></pre>
  <p>In my <code>main.less</code> file I'm doing:</p>
  <pre><code>@import &quot;header.less&quot;;
  @color: #f5adad;
  body {
    background-color: @color;
  }
  </code></pre>
  <p>In my <code>header.less</code> file I'm doing:</p>
  <pre><code>.header {
      background-color: #3d3d;
    }
  </code></pre>
  <p>In my <code>index.js</code> file I'm doing:</p>
  <pre><code>import &quot;./style/main.less&quot;;
  </code></pre>
  <p>And my <code>webpack.config.js</code> looks like:</p>
  <pre><code>module.exports = {
      devtool: 'inline-source-map',
      entry: './src/index.js',
      output: {
          path: path.resolve(__dirname, '/dist'),
          publicPath: '/',
          filename: 'bundle.js'
      },
      devServer: {
          contentBase: './dist'
      },
      module: {
          rules: [
              {
                  test: /\.(js|jsx)$/,
                  exclude: /node_modules/,
                  use: ['babel-loader', 'eslint-loader']
              },
              {
                  test: /\.less$/,
                  use: [
                      'style-loader',
                      'css-loader',
                      'less-loader'
                  ]
              }
          ]
      }
  };
  </code></pre>
  <p>My <code>package.json</code> looks like:</p>
  <pre><code>{
    &quot;name&quot;: &quot;react-config-tutorial&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;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;,
      &quot;start&quot;: &quot;webpack-dev-server --mode development&quot;,
      &quot;format&quot;: &quot;prettier --write \&quot;src/**/*.js\&quot;&quot;,
      &quot;eslint-fix&quot;: &quot;eslint --fix \&quot;src/**/*.js\&quot;&quot;,
      &quot;build&quot;: &quot;webpack --mode production&quot;
    },
    &quot;keywords&quot;: [],
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;dependencies&quot;: {
      &quot;react&quot;: &quot;^18.1.0&quot;,
      &quot;react-dom&quot;: &quot;^18.1.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;babel-eslint&quot;: &quot;^10.1.0&quot;,
      &quot;css-loader&quot;: &quot;^6.7.1&quot;,
      &quot;eslint&quot;: &quot;^7.32.0&quot;,
      &quot;eslint-config-react&quot;: &quot;^1.1.7&quot;,
      &quot;eslint-loader&quot;: &quot;^4.0.2&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.29.4&quot;,
      &quot;less&quot;: &quot;^4.1.2&quot;,
      &quot;less-loader&quot;: &quot;^10.2.0&quot;,
      &quot;prettier&quot;: &quot;2.6.2&quot;,
      &quot;style-loader&quot;: &quot;^3.3.1&quot;,
      &quot;webpack&quot;: &quot;^5.72.0&quot;,
      &quot;webpack-cli&quot;: &quot;^4.9.2&quot;,
      &quot;webpack-dev-server&quot;: &quot;^4.8.1&quot;
    }
  }
  </code></pre>
  <p>Also, because I think file structure might be related, my file structure looks like:
  <a href="https://i.stack.imgur.com/ymuPI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ymuPI.png" alt="file_structure" /></a></p>
  <p>Can anyone make a recommendation on how I can fix the problem? I'm too new to webpack even suggest where the root cause might be.</p>