1. create-react-app 新建項(xiàng)目

$ create-react-app add-less && cd add-less

2. yarn eject 暴露配置文件

$ yarn eject

$ react-scripts eject

NOTE: Create React App 2 supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

? Are you sure you want to eject? This action is permanent. (y/N) 

y 確認(rèn)

3. 修改 cofig/webpack.config.js

找到

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

修改為

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;

找到

{
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 1,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },

修改為

{
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
              },
                'less-loader'
              ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
            },

4. Done就這么簡(jiǎn)單