create-react-app为什么不能用less？

因为我们使用create-react-app脚手架搭建的项目，该脚手架是没有配置less的，所以我们要想使用less需要去额外配置webpack；

 
 

一、暴露webpack

首先需要使用npm run eject暴露出webpack配置文件，这个操作是不可逆的，也可以直接在node_modules中去修改，但是多人合作的话，只会在自己这生效。也使用@craco/craco可用于配置层，无需暴露webpack。

 

二、安装依赖

less和less-loader两个依赖，安装在开发环境即可

yarn add less less-loader -D

 

三、修改webpack.config.js文件

在文件中搜索const sassModuleRegex

在下面添加两行less配置

const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

 

在文件中搜索sassModuleRegex

复制sass的两条配置，并在下方修改添加上

 // less
            {
              test: lessRegex,
              exclude: lessModuleRegex,
               use: [
                ...getStyleLoaders(
                  {
                    importLoaders: 3,
                    sourceMap: isEnvProduction
                      ? shouldUseSourceMap
                      : isEnvDevelopment,
                  },
                  'less-loader'
                ),
                {
                  loader: 'style-resources-loader',
                  options: {
                  	// 配置全局变量
                    patterns: path.resolve(__dirname, '../src/common.less'),
                  },
                },
              ],
              // 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,
            },
            // Adds support for CSS Modules, but using SASS
            // using the extension .module.scss or .module.sass
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: 'local',
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              ),
            },

 

四、解决开发时保存会自动编译less生成css文件问题

可在vscode配置文件settings.json中添加配置，具体settings文件打开位置可自行百度

 "less.compile": {
        "compress": true, // 删除多余空格
        "sourceMap": false, // 是否生产 match对应 .map文件
        "out": false    // 是否创建编译后文件
    }

 
 
 
 

React中css会全局污染问题，没有局部作用域

在Vue中有scoped让css可以拥有局部作用域，而在React中却没有这样的功能，如果我们什么都不去配置css，我们会发现在React中import导入css文件，组件之间会被共享css，导致css污染；
因为create-react-app自带css模块化方案，此处我采用的脚手架自带的CSS Modules
CSS Modules的原理非常简单，其采用的是通过它的规则生成对应的Hash值来作为选择器名称，这样就算他们会共享，那他们的Hash值不同，也不会造成互相影响的问题了

使用方法(无需任何配置)
注意：css文件名需带modules后缀，如果不想带则需在webpack中配置规则
jsx

import React from 'react';
import styles from './styles.modules.less';

const App = () => {
	return (
	<div className={styles.home_banner}></div>
	)
}

如果需要修改组件库内样式则需要加上:global前缀，它就不会被编译成Hash值
less

.home_banner {
  :global .ant-carousel .slick-dots {
    margin-left: 0;
  }

  .item {
    height          : 550px;
    box-sizing      : border-box;
    background-color: #252829;
  }

  :global .slick-dots {
    z-index: 0;

    :global li button::before {
      content: '';
    }
  }
}