vendor files imported via postcss-import not being recompiled on change.

[arenoir]

We are using ember-css-modules and postcss-import to to import some shared scss files. These files are stored in the vendor folder of an ember addon. Ember cli is reloading when it detects a file change in any of these vendor css files but ember-css-modules is not picking up the change. Restarting the ember server is the only way to re compile the changes.

Is there a ember-css-modules or broccoli-postcss configuration needed to add a postcss file loader? postcss-import with webpack uses postcss-loader to solve this issue.

Any help is greatly appreciated.

Thanks

Here are all the style processing installed packages.

    "ember-cli": "~3.28.6",
    "ember-css-modules": "^2.0.1",
    "postcss-advanced-variables": "^3.0.1",
    "postcss-calc": "^9.0.1",
    "postcss-functions": "^4.0.2",
    "postcss-import": "^15.1.0",
    "postcss-nested": "^6.0.1",
    "postcss-preset-env": "^8.3.2",
    "postcss-scss": "^4.0.6",

And the ember-css-modules config:

const postcssImport = require('postcss-import');
const postcssImportOptions = {
  path: ['vendor/postcss/imports/']
};

cssModules: {
  includeExtensionInModulePath: true,
  extension: 'scss',
  plugins: [
    postcssImport(postcssImportOptions),
    //postcssCalc(calcOptions),
    //postcssFunctions(postCssFunctionsConfig),
    //postcssNested,
    //postcssAdvancedVariables(postcssAdvancedVariablesOptions),
    //postcssPresetEnv(postcssPresetEnvOptions)
  ],
  postcssOptions: {
    parser: require('postcss-scss')
  }
};