title: Postcss-loader Webpack plugin looks for package.json in a wrong folder
body: <p>I have SCSS compilation set using Webpack 5. There is a following folder structure:</p>
  <pre class="lang-sh prettyprint-override"><code>/css (CSS files compiled from the SCSS sources)
  /scss (SCSS sources)
  /sass-compiler (Webpack compiler)
      - webpack.config.js
      - package.json
  </code></pre>
  <p>Here is the content of the <code>webpack.config.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>const path = require('path');
  const fs = require('fs');
  
  const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
  
  const getFiles = function (dir) {
      // get all files in dir, filter directories
      return fs.readdirSync(dir).filter(file =&gt; {
          return fs.statSync(`${dir}/${file}`).isFile();
      }).map((item, index) =&gt; dir + item);
  };
  
  module.exports = {
      mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
      entry: getFiles('../scss/'),
      output: {
          path: process.env.NODE_ENV === 'production' ? path.resolve(__dirname, '../dist/css') : path.resolve(__dirname, '../css'),
      },
      module: {
          rules: [
              {
                  test: /\.scss$/,
                  use: [
                      {
                          loader: 'file-loader',
                          options: {
                              name: '[name].css',
                          }
                      },
                      {
                          loader: 'extract-loader'
                      },
                      {
                          loader: 'css-loader',
                          options: {
                              url: false
                          }
                      },
                      {
                          loader: 'postcss-loader',
                          options: {
                              postcssOptions: {
                                  //config: path.resolve(__dirname, &quot;postcss.config.js&quot;),
                              }
                          },
                      },
                      {
                          loader: 'sass-loader',
                          options: {
                              sassOptions: {
                                  outputStyle: (process.env.NODE_ENV === 'production') ? `compressed` : 'expanded',
                              },
                              additionalData: `@import 'included/_included.scss';`
                          }
                      }
                  ]
              }
          ]
      },
  
      plugins: [
          // https://github.com/webdiscus/webpack-remove-empty-scripts
          new RemoveEmptyScriptsPlugin({ verbose: true })
      ],
  };
  </code></pre>
  <p>And here the <code>package.json</code>:</p>
  <pre class="lang-json prettyprint-override"><code>{
    &quot;name&quot;: &quot;scss-using-nodepack&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;A proof of concept: SCSS files compilation using Webpack&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;scripts&quot;: {
      &quot;build:dev&quot;: &quot;webpack&quot;,
      &quot;build:production&quot;: &quot;cross-env NODE_ENV=production webpack&quot;,
      &quot;watch&quot;: &quot;webpack --watch&quot;
    },
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;dependencies&quot;: {
      &quot;autoprefixer&quot;: &quot;^10.3.1&quot;,
      &quot;cross-env&quot;: &quot;^7.0.3&quot;,
      &quot;css-loader&quot;: &quot;^6.2.0&quot;,
      &quot;extract-loader&quot;: &quot;^5.1.0&quot;,
      &quot;file-loader&quot;: &quot;^6.2.0&quot;,
      &quot;postcss-loader&quot;: &quot;^6.1.1&quot;,
      &quot;sass&quot;: &quot;^1.35.2&quot;,
      &quot;sass-loader&quot;: &quot;^12.1.0&quot;,
      &quot;webpack&quot;: &quot;^5.45.1&quot;,
      &quot;webpack-cli&quot;: &quot;^4.7.2&quot;,
      &quot;webpack-remove-empty-scripts&quot;: &quot;^0.7.1&quot;
    },
    &quot;browserslist&quot;: [
      &quot;&gt; 1%&quot;,
      &quot;last 2 versions&quot;,
      &quot;not ie &lt;= 8&quot;
    ],
    &quot;postcss&quot;: {
      &quot;plugins&quot;: {
        &quot;autoprefixer&quot;: {}
      }
    }
  }
  
  </code></pre>
  <p>When I run:</p>
  <pre class="lang-sh prettyprint-override"><code>npm run build:dev
  </code></pre>
  <p>I'm getting following warning on the console:</p>
  <pre class="lang-sh prettyprint-override"><code>You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
  </code></pre>
  <p>So <code>browserlist</code> and <code>postcss</code> config info from <code>package.json</code> are ignored. That's because Webpack is looking for them in wrong places, when I move <code>package.json</code> either to <code>scss/</code> or root folder, the config info is found and compilation done properly.</p>
  <p>So my question is: how can I tell <code>postcss-loader</code> respective Webpack to look for the <code>package.json</code> inside the <code>sass-compiler</code> folder?</p>
  <p>I know about this possibility:</p>
  <pre class="lang-js prettyprint-override"><code>{
                          loader: 'postcss-loader',
                          options: {
                              postcssOptions: {
                                  config: path.resolve(__dirname, &quot;postcss.config.js&quot;),
                              }
                          },
  </code></pre>
  <p>but <code>package.json</code> is preferred place for such configuration for more reasons.</p>
  <p>Many thanks for every hint.</p>