1、安装
npm install -g create-react-app
2、创建项目
create-react-app 项目名 --template typescript
3、删除项目中不必要的文件
4、启动项目
npm run start
配置less
1、安装
npm install less less-loader --save-dev
2、添加less的全局类型声明(在react-app-env.d.ts中添加以下内容)
declare module "*.less" {
const less: any;
export default less;
}
3、配置webpack对less支持
(1) 在react项目中暴露webpack配置文件，命令行即：yarn eject 或 npm run eject
(2) 在执行yarn eject 或 npm run eject时，需要本地没有代码可以更新
git add .
git commit -m ""
yarn eject 或 npm run eject
4、打开配置文件config/webpack.config.js
在73行代码左右添加以下配置
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
在第508行左右添加如下代码：
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
// modules: true, 如果仅打开cssModule 那么原类名 将会没有前缀，无法与自己的样式类名关联，所以下边做法可取
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'icss',
},
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
mode: 'local',
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
5、重新启动项目，在项目中引入less文件可正常使用
项目中如果遇到多个页面使用一个变量的情况下，需要反复引入，可以直接配置全局注册
（1）安装
npm install --save-dev style-resources-loader
(2) 打开配置文件config/webpack.config.js进行配置,直接复制替换即可，注意引用路径和文件名称
{
test: lessRegex,
exclude: cssModuleRegex,
use: [
...getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'
),
{
loader: 'style-resources-loader',
options: {
patterns: path.resolve(__dirname, '../src/common.less'),
},
},
],
sideEffects: true,
},
{
test: lessModuleRegex,
use: [
...getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
{
loader: 'style-resources-loader',
options: {
patterns: path.resolve(__dirname, '../src/common.less'),
},
},
],
},
（3）src下创建common.less文件、创建变量
@bg-color: #000;
（4）页面使用
background-color: @bg-color;
(5) 重新启动项目
项目使用总是会引入各种文件路径，各种层级关系，这个时候我们可以别名
1、打开配置文件config/webpack.config.js，全局搜索alias对象，添加下面属性，页面中src路径下课直接用@代替
'@': path.resolve(__dirname, '../src'),
import Header from '@/components/header';
