SourceMaps for imported SASS partials don't work

gkatsanos commented 6 years ago

assuming we have the following project:

src/components/app/
├── app.js
├── app.scss
├── app.test.js
└── app.vue

the app.vue file:

<template>
  <div id="app" class="app" v-if="isReady">
   <!--some html here-->
  </div>
</template>

<script src="./app.js"></script>
<style src="./app.scss" lang="scss"></style>

And the app.scss file is just a series of imports to partials:

@import 'reset';
@import 'variables';
@import 'base';
@import 'form';
@import 'buttons';
@import 'icons';
@import 'slider';
@import 'helpers';
@import 'misc';

mini-css-extract correctly creates an app.css file. I use devtool: 'source-map', to enable sourceMaps.

When inspecting the HTML/CSS, I don't see the actual partial file, but only app.scss as the source of my code.

Configuration:

      // build/webpack.base.conf.js
      {
        test: /\.scss$/,
        use: [
          MiniCSSExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            }
          },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          {
            loader: 'sass-loader',
            options: {
              includePaths: [config.build.sassVariables],
              data: '@import "variables";@import "mixins/mixins";',
              sourceMap: true,
            }
          },
        ]
      }

The above worked fine with extract-text-webpack-plugin

alexander-akait commented 6 years ago

@gkatsanos looks like bug, feel free to investigate this and send PR :+1:

gkatsanos commented 6 years ago

let's see if others will pop up here to make sure it's not config specific. it's not blocking us right now but at least what I wanted is from someone to validate my configuration isn't messed up. specifically I had these questions:

is the order of loaders correct?
does the plugin (mini-css-extract) receive options implicitly enabling sourceMaps?
is minicssextractplugin part of the CSS loader or the SASS loader stack?

and lastly, has anyone investigated sourcemaps in general? the only way to get them working is with devtool 'source-map' . No other option really seems to work. (and source-map isn't advised)

GodOfGrandeur commented 6 years ago

Just to second i've also got this issue, researching the problem now. Will update if I find anything.

heyflo commented 6 years ago

I have the same issue. The sourcemaps for the SCSS files are lost.

davorpeic commented 6 years ago

Been trying to find a solution to this one for days, only main sass file is referenced. If I find some solution will let you know

alexander-akait commented 6 years ago

Somebody can create minimum reproducible test repo?

davorpeic commented 6 years ago

Ok, I can try doing it today

davorpeic commented 6 years ago

Ok, while recreating our repo to minimal reproducible case I got my sass to generate correct sourcemap pointing to imported sass files. So I assumed something is different. We had few warnings from node-sass as we were importing .css files directly from node_modules libraries, I temporarely removed that _plugins.scss file that handled those imports, and then I got my sourcemap to show correctly, after that I followed import method for css files mentioned here https://github.com/sass/node-sass/issues/2362#issuecomment-386259486 which then build all without errors and I got my sourcemap correctly built. I still need to find better way ti import my css files, but that is another issue.

cloakedninjas commented 6 years ago

Any update on this? Having the same issue, the sourcemap points to a single concatenated .SCSS file but we don't @import .css files

JoshuaSoileau commented 6 years ago

+1

alexander-akait commented 6 years ago

PLEASE create minimum reproducible test repo

cloakedninjas commented 6 years ago

Here you go: https://github.com/cloakedninjas/mini-css-extract-plugin-sourcemap-bug

alexander-akait commented 6 years ago

@cloakedninjas invalid configuration, please use

module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },

alexander-akait commented 6 years ago

Somebody other can create minimum reproducible test repo?