Since sass-loader 12.0.0 the @debug doesn't work with Sass >= 1.43.4 #1065
Description
Bug report
The @debug output in SCSS/SASS works only with:
Sass <= 1.52.3+JS APISass <= 1.52.3+sass-loader <= 11.1.1Sass 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.3sass-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?