Sourcemaps not referencing correct files, browser shows wrong SCSS file when inspecting element

[relm]

Using v0.30.2

I recently noticed that, in Chrome's inspector tool, I am not seeing the correct file / line number reference for my SCSS in the Styles pane.

For example, if I define the following in my app.scss file:

@import "~bootstrap/scss/bootstrap";

.container {
    background-color: #393E49;
}

When inspecting the .container element, it does not show the line number within the app.scss file. Instead, I get the line number from _print.scss - one of the Bootstrap imports. Clicking it jumps to the first occurrence of .container in the _print.scssfile which does not contain my code.

Why is this happening? Same behavior in other browsers as well. For class names that aren't already declared in Bootstrap, everything works as expected.

webpack.config.js:

// webpack.config.js
var Encore = require('@symfony/webpack-encore');
var path = require('path');

Encore
    // the project directory where all compiled assets will be stored
    .setOutputPath('public/assets/dist')
    // the public path used by the web server to access the previous directory
    .setPublicPath('/assets/dist')
    //.addLoader({ test: /\.handlebars$/, loader: 'handlebars-loader' })
    .enableSingleRuntimeChunk()

    // will create public/build/app.js and public/build/app.css
    .addEntry('app', './assets/scripts/app.js')
    .addEntry('video', './assets/scripts/video.js')
    .splitEntryChunks()
    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    //.enableSingleRuntimeChunk()
    //.disableSingleRuntimeChunk()
    // create hashed filenames (e.g. app.abc123.css) - only for production
    .enableVersioning()
    .enableSourceMaps(!Encore.isProduction())
    .enableSassLoader()
    .enablePostCssLoader()
    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()
    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()
    // show OS notifications when builds finish/fail
    .enableBuildNotifications()
    // Enable .vue file processing
    .enableVueLoader(() => {}, { runtimeCompilerBuild: false })
    // This is our alias to the root vue components dir
    .addAliases({
        '@': path.resolve(__dirname, 'assets', 'scripts/vue'),
        styles: path.resolve(__dirname, 'assets', 'styles'),
    })
;

if (Encore.isProduction()) {
    Encore.setOutputPath('public/assets/dist/prod');
}

// export the final configuration
module.exports = Encore.getWebpackConfig();

app.js:

import '../styles/app.scss';

[Dazag]

Is there any update with this issue, I am having exactly the same problem

[Dazag]

I have found out, that if you use CSS Nano inside POSTCss, this will cause the error we're describing here. Instead, if you want to use cssNano, you should do it in its own webpack plugin. This is where I read it.

[htor]

Yes this is an issue here too. Source maps are just plain and simple wrong.

Running version: ^0.28.0