react引入less没有效果

Question

我是按照antd官网的方法安装react-app-rewire-less的方式来在create-react-app中配置引入less的。

如果直接import './App.less',然后使用的时候className = "header"这种方式是没有问题的。

但是如果按照import styles './App.less',使用的时候className={styles.header}这样的方式less就会没有效果。请问这是什么原因哦？

Answer 1

我来公布正确答案吧:要使用 css-module 需要将 css 文件命名为fileName.module.less，然后就能在组件中引入并正常使用了，如下：

注意默认情况下后缀必须是.module.less 才能用 css-module 的写法

比如下面代码：
import React, { Component } from "react";
import { Button } from "antd";
import styles1 from "./index.module.less";

class Hello extends Component {
render() {

return (
  <div className={styles1.main}>
    hello
    <div className={styles1.text}>world</div>
    <Button type="primary">你好</Button>
    <div className="text1">heihei</div>
  </div>
);

}
}

export default Hello;

这样就会生效了

Answer 2

import styles './App.less', 是不是少了一个from import styles from './App.less'

其次就是看你是否开始的module: true, 也就是所谓的模块化！具体的需要看你的配置问价了！一搬网上都会有的

Answer 3

在webpack中，将disableCSSModules设置为false

Answer 4

咋解决的，按照配置设置，运行less文件没效果呢