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'
    
          )
    
    }
  • 相关阅读:
    java转换CSV文件生成xml格式数据
    HTTP的Form数据的结构
    使用Filter实现静态HTML缓冲(一种折中方法)
    webwork的interceptor来实现ajax功能(buffalo)
    Delphi中DLL的编写和调用(例子)
    用C#实现BHO(Brower Helper Object)
    基于Delphi的VFW视频捕获程序的开发
    关于WebWork2中的中文问题
    tomcat中的几点配置说明
    用Sitemesh控制页面布局
  • 原文地址:https://www.cnblogs.com/shun1015/p/13520577.html
Copyright © 2011-2022 走看看