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