Less imports included in all stories. How do I isolate styles per story?

[CardozoC]

I have added Less imports to some of my components, but the CSS files generated by webpack are included globally in the of the site for all components. From the documentation, it seems like CSS should be isolated to each component by default, so I'm not sure what the issue is. Any suggestions on how to isolate styles per component/story?

Ver: Storybook 6.2.9

Main.js (less-loader):

config.module.rules.push({
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              paths: [path.resolve(__dirname, "node_modules")],
            },
            sourceMap: true,
            webpackImporter: false,
          }
        }]
    });

stories/component.stories.js:

import React from 'react';
import { Component } from './component.js';
import './component.less';
import '@package/index.less';

...

stories/component-2.stories.js:

import React from 'react';
import { Component2 } from './component2.js';
import './component2.less';
import '@package-2/index.less';

...

This results in all LESS files being converted to CSS and added to the section of the site. They do not load separately per story.

If I missed any info, please lmk. Thanks :)