zoukankan      html  css  js  c++  java
  • react项目使用less样式,配置less

    create-react-app脚手架创建的项目有sass配置项,使用的时候只需要装包即可,下面是less使用的方法

    由于 create-react-app 脚手架中并没有配置关于 less 文件的解析,所以我们需要自己进行配置。需要安装的插件 less, less-loader

    1、安装less ,less-loader

    npm install less less-loader --save

    2、配置less

        (1)在webpack4.x以上版本  在命令行输入npm run eject命令,将脚手架隐藏的配置文件config->webpack.config.js显示出来.并且配置

        (2)在webpack.config.js文件中找到 css和sass配置项 的 在52行增加less的解析正则规则:

    const lessRegex =/.less$/;
    
    const lessModuleRegex =/.module.less$/;

      (3)在webpack.config.js文件中的css和sass配置项 490行插入:

    {
    
          test: lessRegex,
    
          exclude: lessModuleRegex,
    
          use:getStyleLoaders(
    
                {    
    
                    importLoaders:2,
    
                    sourceMap: isEnvProduction && shouldUseSourceMap,
    
                  },
    
                  'less-loader'
    
          ),
    
          sideEffects:true,
    
    },
    
    {
    
      test: lessModuleRegex,
    
      use:getStyleLoaders(
    
            {
    
                    importLoaders:2,
    
                    sourceMap: isEnvProduction && shouldUseSourceMap,
    
                    modules:true,    //模块化
    
                    getLocalIdent:getCSSModuleLocalIdent,
    
              },
    
              'less-loader'
    
          )
    
    }
  • 相关阅读:
    logback.xml
    logback:RollingFileAppender
    logback :<include>
    logback:参数化日志打印
    logback:fileAppender输出到文件
    logback:root和logger
    logback console控制台输出
    logback encoder详细设置
    logback关闭日志
    IDEA+testng,输出没有test-output目录
  • 原文地址:https://www.cnblogs.com/shun1015/p/13520577.html
Copyright © 2011-2022 走看看