How to apply .less styles to JSX

[ldco2016]

I am working with a project that uses the npm package called less and less-loader. I have read through the documentation, but I am still not following how it works exactly.

Taking a look at a sample in the project, there is a Lists.tsx file that imports a less file but it does it in a way that is not familiar to me:

import {b} from './Lists.less;
That b is not coming from the Lists.less file itself, its coming from a styles.d.ts file:

declare module '*.css' {
  const styles: any;
  export = styles;
}

declare module '*.less' {
  export const b: (...args: unknown[]) => string;
}

declare module '*.svg' {
  const content: any;
  export default content;
}

The way this is all applied in this project is something like this:

<div className={b()}></div>
With the less file having something like:

.ReadAndAgreeTerms {
  margin-top: 24px;
}

But when I try to apply the same pattern to another file, in console I get:

Cannot find name 'b'
  <div className={b('items')}>
     <Text className={b('name')}>{items.name}, </Text>
     <Text className={b('specialties')}>{items.specialties}</Text>
  </div>

The corresponding less file I manually created looks like so:

.items {
  font-size: 12px;
  font-weight: bold;
}

.name {
  font-weight: bold;
}

.specialties {
  font-weight: bold;
}

Super unclear what is supposed to be happening here for the styling to take place as I also notice the project does not pass strings into the b(), it just passes the b() into a className={} and it knows how to apply the style.

[ldco2016]

ComponentSelector {
  &__name {
    font-size: 12px;
    font-weight: bold;
  }

  &__nextOne {
     font-size: 12px;
     font-weight: bold;
  }

  &__anotherOne {
   font-size: 12px; 
  }
}

And the .tsx file was correct like so:

<div className={b()}>
  <Text classname={b('name')}>{item.name}, </Text>
  <Text classname={b('nextOne')}>{item.specialties}, </Text>
 <Text classname={b('anotherOne')}>{item.address}, </Text>
</div>

[iChenLei]

I recommend you to use css modules with less, which can improve your development efficiency with the css modules vscode extension.

import styles from "./index.module.less";
const App = () => <div className={styles.main} ></div>;

.main {
  color: red;
}