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

Closed
webdiscus opened this issue Jun 13, 2022 · 5 comments
Closed

Comments

@webdiscus
Copy link
Contributor

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
Copy link
Member

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
Copy link
Contributor Author

@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
Copy link
Member

@webdiscus I think wen can remove unnecessary lines

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

@alexander-akait
Copy link
Member

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

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

No branches or pull requests

2 participants