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…