• 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'
    
          )
    
    }
  • 相关阅读:
    【BNUOJ 4358】 左手定则
    【NOIP】关押罪犯
    【数算A】表达式·表达式树·表达式求值
    【POJ1679】The Unique MST
    【数算A】舰队、海域出击!
    【NOI2014】动物园
    【POJ1308】&&【HDU1272】Is It A Tree && 小希的迷宫
    【NOI2002】银河英雄传说
    html5之本地存储localStorage示例
    html5之应用缓存示例
  • 原文地址:https://www.cnblogs.com/shun1015/p/13520577.html
Copyright © 2020-2023  润新知