react中在高版本的webpack配置less

https://blog.csdn.net/xxygreen_hand/article/details/90672774（全配置Less和antd主题）

在学习一些react项目时，视频教程中的webpack版本较低，在我们使用npm run eject 或者yarn eject来暴露配置文件时，

发现在config下没有webpack.config.dev.js和webpack.config.prods.js文件，只有一个webpack.config.js文件。此时要配置less（因为antD是使用less),如下

在webpack.config.js下 配置完之后要重启生效

https://blog.csdn.net/czkcui123/article/details/89515949

1. //找到此位置

2. // style files regexes

3. const cssRegex = /\.css$/;

4. const cssModuleRegex = /\.module\.css$/;

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

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

7. //在此添加如下两个常量

8. const lessRegex =/\.less$/;

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

1. //找到此位置

2. 　　 {

3. test: cssRegex,

4. exclude: cssModuleRegex,

5. use: getStyleLoaders({

6. importLoaders: 1,

7. sourceMap: isEnvProduction && shouldUseSourceMap,

8. }),

9. // Don't consider CSS imports dead code even if the

10. // containing package claims to have no side effects.

11. // Remove this when webpack adds a warning or an error for this.

12. // See https://github.com/webpack/webpack/issues/6571

13. sideEffects: true,

14. },

15. // Adds support for CSS Modules (https://github.com/css-modules/css-modules)

16. // using the extension .module.css

17. {

18. test: cssModuleRegex,

19. use: getStyleLoaders({

20. importLoaders: 1,

21. sourceMap: isEnvProduction && shouldUseSourceMap,

22. modules: true,

23. getLocalIdent: getCSSModuleLocalIdent,

24. }),

25. },

26. //在这之后仿照上面添加如下代码

27. {

28. test: lessRegex,

29. exclude: lessModuleRegex,

30. use: getStyleLoaders({

31. importLoaders: 2,

32. sourceMap: isEnvProduction && shouldUseSourceMap,

33. }),

34. sideEffects: true,

35. },

36. {

37. test: lessModuleRegex,

38. use: getStyleLoaders({

39. importLoaders: 2,

40. modules: true,

41. getLocalIdent: getCSSModuleLocalIdent,

42. sourceMap: isEnvProduction && shouldUseSourceMap,

43. }),

44. },

1. //找到此位置

2. // style files regexes

3. const cssRegex = /\.css$/;

4. const cssModuleRegex = /\.module\.css$/;

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

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

7. //在此添加如下两个常量

8. const lessRegex =/\.less$/;

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

10. // This is the production and development configuration.

11. // It is focused on developer experience, fast rebuilds, and a minimal bundle.

12. //找到此位置

13. {

14. test: cssRegex,

15. exclude: cssModuleRegex,

16. use: getStyleLoaders({

17. importLoaders: 1,

18. sourceMap: isEnvProduction && shouldUseSourceMap,

19. }),

20. // Don't consider CSS imports dead code even if the

21. // containing package claims to have no side effects.

22. // Remove this when webpack adds a warning or an error for this.

23. // See https://github.com/webpack/webpack/issues/6571

24. sideEffects: true,

25. },

26. // Adds support for CSS Modules (https://github.com/css-modules/css-modules)

27. // using the extension .module.css

28. {

29. test: cssModuleRegex,

30. use: getStyleLoaders({

31. importLoaders: 1,

32. sourceMap: isEnvProduction && shouldUseSourceMap,

33. modules: true,

34. getLocalIdent: getCSSModuleLocalIdent,

35. }),

36. },

37. //在这之后仿照上面添加如下代码

38. {

39. test: lessRegex,

40. exclude: lessModuleRegex,

41. use: getStyleLoaders({

42. importLoaders: 2,

43. sourceMap: isEnvProduction && shouldUseSourceMap,

44. }),

45. sideEffects: true,

46. },

47. {

48. test: lessModuleRegex,

49. use: getStyleLoaders({

50. importLoaders: 2,

51. modules: true,

52. getLocalIdent: getCSSModuleLocalIdent,

53. sourceMap: isEnvProduction && shouldUseSourceMap,

54. }),

55. },