Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

webdiscus opened this issue Jun 13, 2022 · 5 comments


Copy link

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)


  • 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:


    "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"


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


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?

Copy link

That is breaking change in, looks like we miss it in changelog, now we use webpack API to emit logs, if you need debug please set

Copy link
Contributor Author


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: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

Copy link

@webdiscus I think wen can remove unnecessary lines

Copy link
Contributor Author

@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.

Copy link

Yes, can you send a PR, we have

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

No branches or pull requests

2 participants