Since sass-loader 12.0.0 the @debug doesn't work with Sass >= 1.43.4

[webdiscus]

Bug report

The @debug output in SCSS/SASS works only with:

• Sass <= 1.52.3 + JS API
• Sass <= 1.52.3 + sass-loader <= 11.1.1
• Sass 1.43.3 + sass-loader 13.0.0 (lastest)

Used

• node v16.13.1 (npm v8.1.2)
• webpack: 5.73.0
• sass: 1.43.3 - 1.52.3
• sass-loader: 11.1.1 - 13.0.0

How Do We Reproduce?

Create 3 files in a directory:

package.json

{
    "scripts": {
      "build": "webpack"
    },
    "devDependencies": {
      "css-loader": "^6.7.1",
      "mini-css-extract-plugin": "^2.6.0",
      "sass": "^1.52.3",
      "sass-loader": "^12.0.0",
      "webpack": "^5.73.0",
      "webpack-cli": "^4.9.2"
    }
  }

style.scss

$color: red;
h1 {
    color: $color;
}
@debug '*** Color: #{$color}';

webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  mode: 'development',
  entry: {
    'style': path.resolve(__dirname, "style.scss"),
  },
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
    ],
  },
};

Install npm modules:

npm i

Show result in console output:

npm run build

Expected the output in console: Debug: *** Color: red
Received - nothing.

How to view the @debug output

Change the version of sass-loader from ^12.0.0 (or ^13.0.0) to 11.1.1 in package.json and update npm module:

npm i

Show result in console output:

npm run build

Now you should see the output in console: Debug: *** Color: red.

---

Who broke compatibility: Sass since 1.43.4 or sass-loader since 12.0.0?

[alexander-akait]

That is breaking change in https://github.com/webpack-contrib/sass-loader/releases/tag/v13.0.0, looks like we miss it in changelog, now we use webpack API to emit logs, if you need debug please set https://webpack.js.org/configuration/other-options/#level https://github.com/webpack-contrib/sass-loader/blob/master/src/utils.js#L171

[webdiscus]

@alexander-akait

Thank you for Tip.

The webpack level option has no effect:

  infrastructureLogging: {
    level: 'log',
    debug: ['sass-loader'],
  },

💡 I found how to enable @debug output:

stats: {
  loggingDebug: ['sass-loader'],
}

It would be nice to have it in readme ;-)

The output of Webpack is too "informative":

DEBUG LOG from ./node_modules/sass-loader/dist/cjs.js sass-loader ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./style.scss
    file:///Users/user/Developer/Projects/github/sass-debug-bug/style.scss:4:0: 
    file:///Users/user/Developer/Projects/github/sass-debug-bug/style.scss:5:0: *** Color: red
    file:///Users/user/Developer/Projects/github/sass-debug-bug/style.scss:6:0: *** Color: green
    file:///Users/user/Developer/Projects/github/sass-debug-bug/style.scss:7:0: *** Color: blue

Expected pure Debug output w/o a path to file at each line, so is the output with sass-loader: 11.1.1:

style.scss:5 Debug: 
style.scss:6 Debug: *** Color: red
style.scss:7 Debug: *** Color: green
style.scss:8 Debug: *** Color: blue

[alexander-akait]

@webdiscus I think wen can remove unnecessary lines

[webdiscus]

@webdiscus I think wen can remove unnecessary lines

It would be clean to only show the Debug output.

My suggestion:

• group Debug outputs per source file
• at first line should be: DEBUG LOG from file:///path/to/style.scss
• at each next line: [debug:line 5] here is my debugging text

For example:

DEBUG LOG from file:///Users/user/Developer/Projects/github/sass-debug-bug/style.scss
[debug:line 5] *** Color: red
[debug:line 6] *** Color: green
[debug:line 7] *** Color: blue

The [debug:line 5] in each line is much shorter than, e.g. my-styles-for-something.scss:5.

[alexander-akait]

Yes, can you send a PR, we have logger.group https://webpack.js.org/api/logging/#logger-methods