Output sourceMap by default on less-loader

We have checked if sourceMaps are needed on resolve-url-loader, and according to the source code of react-scripts, all preProcessor's options must be the same({sourceMap:true}), so directly expand sass-loader's options maybe a better choice.

facebook/create-react-app@914c95e

https://github.com/facebook/create-react-app/blob/v4.0.3/packages/react-scripts/config/webpack.config.js#L163

Signed-off-by: Chuck Fan <[email protected]>

lib/craco-less.dev.test.js

@@ -68,7 +68,7 @@ test("the webpack config is modified correctly without any options", () => {
   });
 
   expect(lessRule.use[4].loader).toContain(`${path.sep}less-loader`);
-  expect(lessRule.use[4].options).toEqual({});
+  expect(lessRule.use[4].options).toEqual({ sourceMap: true });
 
   const lessModuleRule = oneOfRule.oneOf.find(
     (r) => r.test && r.test.toString() === "/\\.module\\.less$/"
@@ -99,7 +99,7 @@ test("the webpack config is modified correctly without any options", () => {
   });
 
   expect(lessModuleRule.use[4].loader).toContain(`${path.sep}less-loader`);
-  expect(lessModuleRule.use[4].options).toEqual({});
+  expect(lessModuleRule.use[4].options).toEqual({ sourceMap: true });
 });
 
 test("the webpack config is modified correctly without any options on Windows", () => {
@@ -158,7 +158,7 @@ test("the webpack config is modified correctly without any options on Windows",
 
   // We use `require.resolve("less-loader")`, so it's the OS separator here
   expect(lessRule.use[4].loader).toContain(`${path.sep}less-loader`);
-  expect(lessRule.use[4].options).toEqual({});
+  expect(lessRule.use[4].options).toEqual({ sourceMap: true });
 
   const lessModuleRule = oneOfRule.oneOf.find(
     (r) => r.test && r.test.toString() === "/\\.module\\.less$/"
@@ -188,7 +188,7 @@ test("the webpack config is modified correctly without any options on Windows",
 
   // We use `require.resolve("less-loader")`, so it's the OS separator here
   expect(lessModuleRule.use[4].loader).toContain(`${path.sep}less-loader`);
-  expect(lessModuleRule.use[4].options).toEqual({});
+  expect(lessModuleRule.use[4].options).toEqual({ sourceMap: true });
 });
 
 test("the webpack config is modified correctly with less-loader options", () => {
@@ -227,6 +227,7 @@ test("the webpack config is modified correctly with less-loader options", () =>
 
   expect(lessRule.use[4].loader).toContain(`${path.sep}less-loader`);
   expect(lessRule.use[4].options).toEqual({
+    sourceMap: true,
     javascriptEnabled: true,
     modifyVars: {
       "@less-variable": "#fff",
@@ -252,6 +253,7 @@ test("the webpack config is modified correctly with less-loader options", () =>
 
   expect(lessModuleRule.use[4].loader).toContain(`${path.sep}less-loader`);
   expect(lessModuleRule.use[4].options).toEqual({
+    sourceMap: true,
     javascriptEnabled: true,
     modifyVars: {
       "@less-variable": "#fff",
@@ -320,6 +322,7 @@ test("the webpack config is modified correctly with all loader options", () => {
 
   expect(lessRule.use[4].loader).toContain(`${path.sep}less-loader`);
   expect(lessRule.use[4].options).toEqual({
+    sourceMap: true,
     javascriptEnabled: true,
     modifyVars: {
       "@less-variable": "#fff",
@@ -357,6 +360,7 @@ test("the webpack config is modified correctly with all loader options", () => {
 
   expect(lessModuleRule.use[4].loader).toContain(`${path.sep}less-loader`);
   expect(lessModuleRule.use[4].options).toEqual({
+    sourceMap: true,
     javascriptEnabled: true,
     modifyVars: {
       "@less-variable": "#fff",
@@ -404,7 +408,7 @@ test("the webpack config is modified correctly with the modifyLessRule option",
   });
 
   expect(lessRule.use[4].loader).toContain(`${path.sep}less-loader`);
-  expect(lessRule.use[4].options).toEqual({});
+  expect(lessRule.use[4].options).toEqual({ sourceMap: true });
 });
 
 test("the webpack config is modified correctly with the modifyLessModuleRule option", () => {
@@ -459,7 +463,7 @@ test("the webpack config is modified correctly with the modifyLessModuleRule opt
   });
 
   expect(lessModuleRule.use[4].loader).toContain(`${path.sep}less-loader`);
-  expect(lessModuleRule.use[4].options).toEqual({});
+  expect(lessModuleRule.use[4].options).toEqual({ sourceMap: true });
 
   const sassModuleRule = oneOfRule.oneOf.find((rule) => {
     if (!rule.test) return false;

lib/craco-less.js

@@ -93,12 +93,10 @@ const overrideWebpackConfig = ({ context, webpackConfig, pluginOptions }) => {
           },
         });
       } else if (rule.loader.includes(`${pathSep}sass-loader${pathSep}`)) {
-        const defaultLessLoaderOptions =
-          context.env === "production" ? { sourceMap: true } : {};
         lessRule.use.push({
           loader: require.resolve("less-loader"),
           options: {
-            ...defaultLessLoaderOptions,
+            ...rule.options,
             ...pluginOptions.lessLoaderOptions,
           },
         });