Enable hybrid css loader with both scoped and non scoped styles

Question

At present every .less files expect to be loaded as modules and javascript enabled from webpack configuration.

Hence we need to load style sheets as

import style form './styles.less'

Usage: {style.container}

So with this, we are not able to apply global themes as it's scoped.

Can we have an option without a scope too along with scoping as an option provided?

Below is the Configuration:

   {
      loader: 'less-loader',
      options: {
        javascriptEnabled: true,
        modifyVars: themeVariables
      }
    }

And the css-loader configuration for the same is as below:

      {
          loader: 'css-loader',
          options: {
            importLoaders: 2,
            modules: true,
            camelCase: true,
            localIdentName: '[name]__[local]',
            getLocalIdent: (
              loaderContext,
              localIdentName,
              localName,
              options
            ) => {
              if (!options.context) {
                options.context = loaderContext.rootContext;
              }

              const request = path
                .relative(options.context, loaderContext.resourcePath)
                .replace(/\\/g, '/');
              const segs = request.split('/');
              let name = segs[segs.length - 2];
              if (name === 'style') {
                name = segs[segs.length - 3];
              }

              return name + '_' + localName;
            }
          }
        },

The expectation is to load .less files without using variables

import './styles.less'

Usage: '.container'

Tried to add exportGlobals: true, for css-loader options but it throws an error as options should NOT have additional properties