react 引入 less 不起作用

Question

部分代码

import  style from './iterationHeader.less'

        const pageHeaderExtra = (
            <div className={style.pageHeaderSilder}>
                <div>
                    <p>任务数</p>
                    <p>56</p>
                </div>
                <div>
                    <p>任务完成程度</p>
                    <p>8<span> / 24</span></p>
                </div>
                <div>
                    <p>操作数</p>
                    <p>2,223</p>
                </div>
            </div>
        );
        

            <Col span={8}>
                <DemoBox value={120}>
                    {pageHeaderExtra}
                </DemoBox>
            </Col>

less 文件

@import "~antd/lib/style/themes/default.less";
@import "../utils/utils.less";

.pageHeaderSilder {
    .clearfix();
        float: right;
    & > div {
          padding: 0 32px;
          position: relative;
          float: left;
    & > p:first-child {
          color: @text-color-secondary;
          font-size: @font-size-base;
          line-height: 22px;
          margin-bottom: 4px;
      }
    & > p {
          color: @heading-color;
          font-size: 30px;
          line-height: 38px;
    & > span {
          color: @text-color-secondary;
          font-size: 20px;
      }
    }
    &:after {
         background-color: @border-color-split;
         position: absolute;
         top: 8px;
         right: 0;
         width: 1px;
         height: 40px;
         content: '';
     }
    }
    & > div:last-child {
          padding-right: 0;
    &:after {
         display: none;
     }
    }
}

webpack

{
        test: /\.less$/,
        use: ['style-loader','css-loader','less-loader']
    },

没有报错信息

检查div 中没有class 属性 加入后可以正常显示样式

Answer 1

是css-modules没配置对吧