一、react中添加Less/sass配置：

第一步：先释放出react配置文件（释放出config和scripts目录）

第二步：安装less或sass

安装less:  npm install less less-loader --save-dev

第三步：node_modules目录下react-scripts-ts 配置webpack.config.dev.js和webpack.config.prod.js文件支持less

第一：改webpack.config.dev.js文件：找到module的rules规则配置  1）test: /\.css$/改成 test: /\.(css|less)$/ 2）在use数组末尾添加一项： { loader: require.resolve('less-loader')} 第二：改 webpack.config.prod.js文件：找到module的rules规则配置 1）test: /\.css$/改成 test: /\.(css|less)$/ 2）在use数组末尾添加一项： { loader: require.resolve('less-loader')} less语法：https://www.cnblogs.com/haoyijing/p/5793788.html

二、如何让react支持局部样式 （即类似于vue中的scoped）

将webpack.config.dev.js中的配置改之前： { test: /\.(css|less)$/, use: [ require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1 },

配置添加一项，添加完后

改之后：

{                test: /\.(css|less)$/,                use: [                  require.resolve('style-loader'),                  {                    loader: require.resolve('css-loader'), options: { importLoaders: 1, modules:true, //这是新添加的 localIdentName: '[path][name]__[local]--[hash:base64:10]' //这是新添加的 },

另一个文件：webpack.config.prod.js只改一处即可

添加前：

use: [                {                  loader: require.resolve('css-loader'),                  options: { importLoaders: 1, minimize: true, sourceMap: shouldUseSourceMap, }, },

添加一项，添加后：

use: [               {                 loader: require.resolve('css-loader'),                 options: { importLoaders: 1, minimize: true, modules:true, //新添加的 sourceMap: shouldUseSourceMap, }, },