Is my concept correct?
Are you using Chrome Dev-Tool? If you go under Sources Tab, add your project folder there, this might solve your issue. However, Laravel Mix should generate sourcemap within the CSS file, which helps locating code line numbers in SCSS files, instead of the compiled version of the file.
I've never used
.styles in Laravel Mix. So not sure how that relates to sourcemapping, etc.
I'm not sure how your folder structure is, but the dependency issue might be that you're just referencing a file in a wrong location.
I would like to use the default app.scss file for the common css needed at all views. And i would like to generate another file with the specific CSS that will be used in a specific view (listing.scss).
Let's say your file structure is as: (the underscore in file names is just a convention, for files that are included, often called partials)
Use what @bashy wrote in his original response:
When you compile, you'll have
listing.css file in your
public/css folder, now all you need to do is add a link to the stytlesheet in the view that needs it. And when you're debugging, Chrome should display correct line numbers, in the SCSS file not CSS.
Hope that helps.