Step1：使用create-react-app創建項目css
1. yarn create react-app my-test-apphtml
Step2：暴露webpack配置node
1. 在my-test-app目錄下執行：yarn eject (沒法啓動的話，刪除node_modules目錄與yarn.lock後從新執行yarn)react
2. 執行完畢後能夠看到項目中多了一些文件夾，進入config目錄能夠找到webpack.config.js，即咱們以後須要修改配置的文件。webpack
Step3：配置lessweb
1. 安裝：yarn add less less-loader --save-devjson
2. 打開webpack.config.js, 找到：react-native
// style files regexes
.....
// 添加less解析規則
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
3. 在module -> rules中增長：
// Less 解析配置
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
)
},
// 舊版以下*******************************************babel
2. 打開webpack.config.dev.js文件（prod文件與之相似）：antd
（找到以下代碼段，並修改高亮處的代碼）
（1）第一處（注意要按照style-loader，css-loader，postcss-loader，less-loader的順序）
{
test:
/\.(css|less)$/,
use: [
require.resolve('style-loader'),
{...},
{
loader: require.resolve('less-loader'),
},
],
},
（2）第二處
{
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [
/\.(js|jsx|mjs)$/,
/\.html$/,
/\.json$/,
/\.(css|less)$/,
],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// ****************************************8
Step4：配置antd
1. 安裝：
（1）yarn add antd
（2）yarn add babel-plugin-import --dev
2. 增長.babelrc文件：
{
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
// 舊版*************************************88
2. 打開webpack.config.dev.js文件（prod文件與之相似）：
（找到以下代碼段，並新增高亮處的代碼）
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
plugins: [
['import', [{ libraryName: "antd", style: 'css' }]],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
// ****************************8
Step5：配置相對根路徑
一、打開webpack.config.dev.js文件（prod文件與之相似）：
（找到以下代碼段，並新增高亮處的代碼）
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
'@': path.resolve(__dirname, '../src'),
},