Reactjs+CRA+TS+Carco+Less 不正确的工作模块系统css

Question

我的模块系统有问题 css，例如我的代码文件和配置：react-app-env.d.ts、craco.config.js、CircleButtonWithMessage.module.less、CircleButtonWithMessage.tsx，说明如下：

//react-app-env.d.ts
/* eslint-disable spaced-comment */
/// <reference types="react-scripts" />
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.svg'
declare module '*.mp4'
declare module '*.mov'
declare module '*module.less'

//craco.config.js
const CracoLessPlugin = require('craco-less')
const CracoAlias = require('craco-alias')

module.exports = {
  plugins: [
    { plugin: CracoLessPlugin },
    {
      plugin: CracoLessPlugin,
      options: {
        cssLoaderOptions: {
          sourceMap: true,
          modules: true,
          localIdentName: '[local]___[hash:base64:5]',
        },
        lessLoaderOptions: {
          lessOptions: {
            orelativeUrls: false,
            sourceMap: true,
            javascriptEnabled: true,
          },
        },
      },
    },
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: '.',
        tsConfigPath: './tsconfig.path.json',
      },
    },
  ],
}

//CircleButtonWithMessage.tsx
import React from 'react'
import ChatSvg from '@svg/chat.svg'
import BookIconSvg from '@svg//book_icon.svg'
import SkypeSvg from '@svg/skype.svg'
import cx from 'classnames'
import classes from './CircleButtonWithMessage.module.less'

const CircleButtonWithMessage: React.FC = () => {
  return (
    <div
      className={cx(classes.navpanel__socials, classes.navpanel__socials_mg)}
    >
      <button type="button" className={cx('btn', classes.btn_mg)}>
        <img src={BookIconSvg} alt="" />
        <div className={classes.messages}>1</div>
      </button>
      <button type="button" className={cx('btn', classes.btn_mg)}>
        <img src={SkypeSvg} alt="" />
        <div className={classes.messages}>1</div>
      </button>
      <button type="button" className={cx('btn', classes.btn_mg)}>
        <img src={ChatSvg} alt="" />
        <div className={classes.messages}>1</div>
      </button>
    </div>
  )
}

export default CircleButtonWithMessage

//CircleButtonWithMessage.module.less
@accent-color: #f23232;
@font-face {
  font-family: 'Graphik LC Web';
  src: url('../../assets/fonts/Graphik/Graphik-Medium-Web.ttf')
    format('truetype');
  font-style: normal;
}

.navpanel__socials_mg {
  margin-top: auto;
}
.navpanel__socials {
  .btn {
    position: relative;
  }
}

.messages {
  background-color: @accent-color;
  width: 1.25rem;
  height: 1.25rem;
  color: #ffffff;
  font-family: 'Graphik LC Web', sans-serif;
  font-size: 0.75rem;
  position: absolute;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 2px;
}

here problem => import 类 from './CircleButtonWithMessage.module.less' module.less 不起作用，webpack 不理解 less 和简单选择器中的变量，请帮助我(

我不会弹出我的项目和 webpack 手动配置，需要解决才能与 carco

Answer 1

好的，我解决了那个问题，下一步配置：

    const CracoLessPlugin = require('craco-less')
    const CracoAlias = require('craco-alias')
    
    const lessModifyVars = {}
    module.exports = {
      plugins: [
        {
          plugin: CracoLessPlugin,
          options: {
            lessLoaderOptions: {
              lessOptions: {
                modifyVars: lessModifyVars,
                javascriptEnabled: true,
              },
            },
          },
        },
        {
          plugin: CracoLessPlugin,
          options: {
            lessLoaderOptions: {
              lessOptions: {
                modifyVars: lessModifyVars,
                javascriptEnabled: true,
              },
            },
            modifyLessRule: function (lessRule, context) {
              lessRule.test = /\.module\.(less)$/
              lessRule.exclude = undefined
              return lessRule
            },
            cssLoaderOptions: {
              modules: {
                localIdentName: '[local]_[hash:base64:5]',
              },
            },
          },
        },
        {
          plugin: CracoAlias,
          options: {
            source: 'tsconfig',
            baseUrl: '.',
            tsConfigPath: './tsconfig.path.json',
          },
        },
      ],
    }

这对我有用，我需要描述回调修改规则，但 module less 不会在内部保存选择器层次结构，我该如何更正？例如 btn 选择器不会使用 (


    .navpanel__socials {
      .btn {
        position: relative;
      }
    }

...next code doesn't work normaly

 <button type="button" className={cx('btn', classes.btn_mg)}>

但我知道我哪里有问题，下面是正确的案例：

<button type="button" className={cx('btn', classes.btn, classes.btn_mg)}>

Reactjs+CRA+TS+Carco+Less 不正确的工作模块系统css

Reactjs+CRA+TS+Carco+Less don't correct work module system css

javascript

less

typescript

reactjs

webpack