create-react-app搭配react16+ts+less

脚手架默认不支持less
create-react-app创建ts类型的react项目

// 全局安装脚手架工具
npm install -g create-react-app

// 使用脚手架创建react项目
npx create-react-app demo --template typescript

 

项目中,你写less,并引入tsx中,如下

import React from ‘react‘;
import style from ‘./style.less‘;

const Login = () => {
  return (
    <div className={style.Login}>登录</div>
  );
}

export default Login;
.Login {
  color: red;
}

 

添加less的全局类型声明,编译阶段不报错

你会发现??,导入less时如果被提示找不到模块xxx.less,需要在项目的根路径文件react-app-env.d.ts(理论上,只要定义全局类型声明就行,非本文件也行)中,添加一下内容

declare module "*.less" {
  const less: any;
  export default less;
}

如果是tsx,即非ts的react项目,忽略此步骤

 

安装webpack对应的less支持
安装对应的包

npm install less-loader --save-dev

配置webpack对less支持
运行npm run eject暴漏webpack的配置文件config/webpack.config.js
在第50行配置如下:

//添加如下支持less配置代码
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

在第500行添加如下代码:

            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                  {
                    importLoaders: 2,
                    // modules: true, 如果仅打开cssModule  那么原类名 将会没有前缀,无法与自己的样式类名关联,所以下边做法可取
                    modules:{
                      localIdentName: ‘[local]_[hash:base64:5]‘,
                    },
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                  },
                  ‘less-loader‘
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                  {
                    importLoaders: 2,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                    modules: true,
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                  ‘less-loader‘
              ),
            },

 



create-react-app搭配react16+ts+less

上一篇:家庭记账本安卓版开发:第五天


下一篇:android优化从网络中加载图片速度。。