react16.8+webpack4.29+less-loader

绝地灬酷狼 2022-01-20 06:37 188阅读 0赞

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…][juejin.im_post_5c3964] 代码修改请看：[github.com/sbwxffnhc/R…][github.com_sbwxffnhc_R]

[juejin.im_post_5c3964]: https://juejin.im/post/5c3964986fb9a049b41cb040
[github.com_sbwxffnhc_R]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fsbwxffnhc%2FReact-Note%2Fcommit%2Fb3d0f0c1dc3aa95d6de406d71adb5c68e378f39e