меньше стиля не работает в компоненте реакции - PullRequest
Новая
       107

меньше стиля не работает в компоненте реакции

0 голосов
/ 10 июля 2020

Я пытаюсь уменьшить стиль в моем компоненте реакции, но мой стиль не работает. при импорте меньшего количества файлов он не дает никаких ошибок, но не применяет стили. Итак, я не знаю, что-то не так с меньшим количеством файлов или веб-пакетов. Если вы можете помочь мне с файлом webpack, это будет большим подспорьем. сообщите мне, если вам нужны дополнительные подробности. 

This is webpack

    const lessRegex = /\.less$/;
    const lessMoudleRegex = /\.module\.(less)$/;
    
    {
                  test: lessRegex,
                  exclude: lessMoudleRegex,
                  use: getStyleLoaders(
                    {
                      importLoaders: 3,
                      sourceMap: isEnvProduction && shouldUseSourceMap,
                    },
                    'less-loader'
                  ),
                  // Don't consider CSS imports dead code even if the
                  // containing package claims to have no side effects.
                  // Remove this when webpack adds a warning or an error for this.
                  // See https://github.com/webpack/webpack/issues/6571
                  sideEffects: true,
                },
                // Adds support for CSS Modules, but using LESS
                // using the extension .module.scss or .module.sass
                {
                  test: lessMoudleRegex,
                  use: getStyleLoaders(
                    {
                      importLoaders: 3,
                      sourceMap: isEnvProduction && shouldUseSourceMap,
                      modules: {
                        getLocalIdent: getCSSModuleLocalIdent,
                      },
                    },
                    'less-loader'
                  ),
                },

// This is less style file
    
    @background-color: red;
    
    .Container {
        width: 450px;
        background-color: @background-color;
        box-sizing: border-box;
    }
    .Skeleton__Image {
        display: block;
        width: 100%;
    }
    
    import React, { useState } from "react";
    import styles from './RecipeSkeleton.less';
    import { Skeleton } from "antd";

// This is the react component
    
    const RecipeSkeleton = () => {
    
      const [active, setActive] = useState(true);
      const [size, setSize] = useState("default");
      const [buttonShape,setButtonShape] = useState("default");
    
        return (
          <div className={styles.Container} >
            <Skeleton.Image className={styles.Skeleton__Image} />
            <div>
                <Skeleton.Button active={active} size={size} shape={buttonShape} /> 
                <Skeleton.Button active={active} size={size} shape={buttonShape} />
                <Skeleton.Button active={active} size={size} shape={buttonShape} />
            </div>
            <div>
              <Skeleton.Image />
              <Skeleton.Image />
              <Skeleton.Image />
            </div>
          </div>
        );
    }
    
    export default RecipeSkeleton;
...