react 添加less支持

一、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,
                 },
               },