如何将.less样式应用到JSX

Question

我正在开发一个使用名为

less

和

less-loader

的 npm 包的项目。我已经阅读了文档，但我仍然不明白它到底是如何工作的。

看一下项目中的示例，有一个

Lists.tsx

文件导入了一个less文件，但它的方式是我不熟悉的：

import {b} from './Lists.less;

b

不是来自

Lists.less

文件本身，它来自

styles.d.ts

文件：

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;
}

这一切在这个项目中的应用方式是这样的：

<div className={b()}></div>

less 文件具有类似以下内容：

.ReadAndAgreeTerms {
  margin-top: 24px;
}

但是当我尝试将相同的模式应用于另一个文件时，在控制台中我得到：

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

我手动创建的相应 less 文件如下所示：

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

.name {
  font-weight: bold;
}

.specialties {
  font-weight: bold;
}

超级不清楚这里应该发生什么来进行样式设置，因为我还注意到该项目不会将字符串传递到

b()

中，它只是将

b()

传递到

className={}

中并且它知道如何应用风格。

我将 less 文件重命名为显示：

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

&__name {
  font-weight: bold;
}

&__specialties {
  font-weight: bold;
}

我没有收到任何错误，但样式并没有采用看起来像内联样式的方式：

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

Answer 1

因此

less

库在如何使用类选择器方面有细微差别。在

filename.less

文件上你需要这样写：

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

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

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

.tsx

文件是正确的，如下所示：

<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>

我希望这可以帮助像我一样不熟悉

less

的人。