8000 Sourcemaps not referencing correct files, browser shows wrong SCSS file when inspecting element · Issue #824 · symfony/webpack-encore · GitHub
[go: up one dir, main page]
Skip to content

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

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.

Sign up for GitHub

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

Jump to bottom
Open
relm opened this issue Aug 18, 2020 · 5 comments
Open

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

relm opened this issue Aug 18, 2020 · 5 comments
Labels
Stalled

Comments

@relm
Copy link
relm commented Aug 18, 2020 •
edited
Loading

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
Copy link
Dazag commented Jan 13, 2021

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

@Dazag
Copy link
Dazag commented Jan 24, 2021

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
Copy link
htor commented Nov 9, 2021 •
edited
Loading

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

Running version: ^0.28.0

@carsonbot
Copy link
Collaborator

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

1 similar comment
@carsonbot
Copy link
Collaborator

Thank you for this issue.
There has not been a lot of activity here for a while. Has this been resolved?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Stalled
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Dazag @htor @relm @carsonbot
0