React——less的配置和使用

1. less 和less-loader的安装

   npm install less less-loader --save

2.  less在webpack.config,js中的配置

   //找到const cssModuleRegex = /\.module\.css$/;，在下方添加以下两句
   
   
   const lessRegex = /\.less$/;
   const lessModuleRegex = /\.module\.less$/;
   
   
   /* 找到以下代码，在下方添加
           {
                 test: cssModuleRegex,
                 use: getStyleLoaders({
                   importLoaders: 1,
                   sourceMap: isEnvProduction
                     ? shouldUseSourceMap
                     : isEnvDevelopment,
                   modules: {
                     getLocalIdent: getCSSModuleLocalIdent,
                   },
                 }),
           },
    */
   
   //所需添加的代码
           {
                 test: lessRegex,
                 exclude: lessModuleRegex,
                 use: getStyleLoaders({
                   importLoaders: 1,
                   modules: true,
                   sourceMap: isEnvProduction && shouldUseSourceMap
                 },
                   "less-loader"
                 ),
                 sideEffects: true
           },
           {
                 test: lessModuleRegex,
                 use: getStyleLoaders({
                   importLoaders: 1,
                   sourceMap: isEnvProduction && shouldUseSourceMap,
                   modules: true,
                   getLocalIdent: getCSSModuleLocalIdent
                 },
                   "less-loader"
                 )
           },

3. 如果出现错误：this.getOptions is not a function，则是因为less-loader的版本过高，需要卸载当前的less-loader的版本，下载低版本的less-loader

   //卸载指令
   npm uninstall less-loader
   //安装5.0.0版本指令
   npm install less-loader@5.0.0

4. 使用：
   1. 全局采用：通过标签上的className去匹配，需要在less的最外层添加:global

      :global{
        .App {
          text-align: center;
        }
      }

   2. 通过变量名采用：在less中写入style的属性名，在标签中使用变量来引用

      <div className={style.App} ></div>
      <!-- style为引入的less的文件， App为所需要的引用的文件中的style名 --!>