使用 create-react-app 初始化 react 项目,并进行常用配置;
- typescript
- less
- css module
$ npx create-react-app my-app --template typescript
$ npm run eject
$ # or
$ yarn eject
$ npm install less@^3.9.0 less-loader@^5.0.0 -S
$ # or
$ yarn add less@^3.9.0 less-loader@^5.0.0 -S
// `config/webpack.config.js`
const lessRegex = /\\.less$/;
const lessModuleRegex = /\\.module\\.less$/;
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function (webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// ...
module: {
// ...
rules: [
// ...
{
oneOf: [
// ...
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
]
}
]
}
}
这里直接配置 .less 文件支持 css module,而不需要每次都使用 .module.less 为后缀名的文件
在组件内使用方式:
// index.less
.text {
font-size: 50px;
color: red;
}
// inidex.tsx
import React from 'react';
import styles from './index.less';
interface Props {}
const Hello = (props: Props) => {
return <div className={styles.text}>Hello</div>;
};
export default Hello;
在 tsx 文件中,引入 .less 文件会报错找不到 module,需要在声明模块,并在 tsconfig.json 中配置
新建文件 typings/index.d.ts
// typings/index.d.ts
declare module '*.css'
declare module '*.less'
declare module '*.scss'
declare module '*.svg'
在 tsconfig.json
新增配置
{
// ...
"include": ["src", "typings"],
"typings": "typings/*"
}
在 config/webpack.config.js
中配置 alias
// ...
alias: {
'@': 'src',
}
配置 ts 支持
// tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
},
}