react16.8+webpack4.29+less-loader

yarn eject后暴露出webpack版本为

"react": "^16.8.6",
    "webpack": "4.29.6",
复制代码

yarn eject 后要安装的插件：

yarn add @babel/plugin-syntax-jsx
复制代码

添加less-loader

yarn add less
yarn add less-loader
复制代码

修改配置环境（webpack.config.js）

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
+ const lessRegex = /\.less$/;
+ const lessModuleRegex = /\.module\.less$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;


复制代码

配置less-loader

//@To-do 原来的内容
// Adds support for CSS Modules, but using SASS
          // using the extension .module.scss or .module.sass
 {
            test: sassModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },
              'sass-loader'
            ),
 },
 
//@To-do 添加以下内容
+         //Adds support for less  
+         {
+            test: lessRegex,
+            exclude: lessModuleRegex,
+            use: getStyleLoaders({ importLoaders: 2 }, 'less-loader'),
+          },
          // Adds support for CSS Modules, but using SASS
          // using the extension .module.scss or .module.sass
          {
            test: lessModuleRegex,
            use: getStyleLoaders(
              {
                importLoaders: 2,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
              },
              'less-loader'
            ),
 },

复制代码

关于webpack更多请参考文章 :juejin.im/post/5c3964… 代码修改请看：github.com/sbwxffnhc/R…