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

问题描述

我的模块系统 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;
}

这里的问题 => 从 './CircleButtonWithMessage.module.less' 导入类 module.less 不起作用，webpack 不理解 less 和简单选择器中的变量，请帮助我（

我不会弹出我的项目和 webpack 手动配置，需要解决与 carco 一起使用

解决方法

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

    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,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',],}

这对我有用，我需要描述回调修改规则，但模块较少不会在内部保存选择器层次结构，我该如何纠正？例如 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)}>