SourceMaps for imported SASS partials don't work #123

gkatsanos · 2018-05-03T17:10:19Z

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

The text was updated successfully, but these errors were encountered:

alexander-akait · 2018-05-03T18:11:40Z

@gkatsanos looks like bug, feel free to investigate this and send PR 👍

gkatsanos · 2018-05-03T18:41:16Z

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 · 2018-05-10T15:30:25Z

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

heyflo · 2018-06-02T17:48:56Z

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

davorpeic · 2018-06-20T01:36:35Z

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 · 2018-06-20T09:21:34Z

Somebody can create minimum reproducible test repo?

davorpeic · 2018-06-20T12:36:02Z

Ok, I can try doing it today

davorpeic · 2018-06-20T15:00:31Z

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 sass/node-sass#2362 (comment) 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 · 2018-08-23T14:48:30Z

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 · 2018-08-29T19:51:40Z

+1

alexander-akait · 2018-08-29T19:53:19Z

PLEASE create minimum reproducible test repo

cloakedninjas · 2018-09-04T17:54:23Z

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

alexander-akait · 2018-09-05T15:25:15Z

@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 · 2018-09-05T15:25:32Z

Somebody other can create minimum reproducible test repo?

ezarowny · 2018-09-06T16:58:32Z

I'm running into this same problem. I have a main styles.scss that functions as an entry point for our SCSS.

If a style is coming from an imported scss file (prefixed by an underscores), it's mapped correctly back to its source file. If the style is actually in styles.scss, it links back to a concatenated file.

I then remembered that I was using postcss-loader and disabling that seemed to fix my problem. I'll play around with this a bit a more and try to determine what isn't playing well.

alexander-akait · 2018-09-06T17:01:42Z

@ezarowny PLEASE create minimum reproducible test repo

ezarowny · 2018-09-06T17:10:31Z

I was planning on it. I really wanted to make sure it was postcss-loader though. I'll get you something in a bit.

ezarowny · 2018-09-06T18:03:20Z

Well, I did make my test case and it's at https://github.com/ezarowny/loader-adventure. However, it's actually not causing the bug I'm seeing. I'm going to dig a bit into my vendors and see if any of them are causing any problems.

ezarowny · 2018-09-06T18:27:53Z

Huh, importing bootstrap at the top of styles.scss causes the source map issues. I've almost exorcised bootstrap from our codebase, so this might not be an issue for me for much longer, but it's still interesting.

ezarowny · 2018-09-06T18:35:05Z

@evilebottnawi do you want me to add bootstrap to the test case repo? Doing so will actually cause the sourcemap issue (if it's added to the top of styles.scss) but I feel doing so might be a bit out of scope for this project.

ezarowny · 2018-09-06T18:56:13Z

It's strange because the file and line number reported by Chrome are correct but when I click on the file link in Chrome it goes to this massive concatenated SCSS file. Anything in an imported file is linking fine though.

CoolGoose · 2018-09-23T15:37:03Z

Same issue for me, working on a separate reproducible build since right now it's a bit hammered in an existing codebase.

Here's a link to my current webpack.config.js

The issue happens also if I am importing the scss files in a vue component (in that case the entrypoint vue component is the main source for all).

cloakedninjas · 2018-09-24T10:33:52Z

I eventually found my issue in the original codebase I had the problem in... Similar to above, we were using postcss-loader and weren't setting sourceMap: true.

Moral of the story, set sourceMap in every loader ... which feels a little smelly given that Webpack has a root devtool config option ... I would have thought every loader would respect that option 🤔

CoolGoose · 2018-09-24T10:37:36Z

@cloakedninjas i do have sourceMap: true for postcss-loader (same for resolve-url-loader and sass-loader and css-loader)

CoolGoose · 2018-09-24T10:46:05Z

Ok, this might be slightly silly, but I've noticed there's a resolve-url-loader version 3.0 that uses postcss. Switching to that makes it work-ish so in my case the issue was caused by resolve-url-loader not propagating the sourceMap correctly (although right now it seems that not all matches work perfectly). So i'm starting to think the problem isn't in the mini-css-extract-plugin itself, but in the whole flow of plugins over plugins over plugins :)

jasongilmour · 2018-11-20T17:51:10Z

+1

ankurarora · 2018-11-22T22:38:58Z

In my case I am using gulp-sass and have source maps from gulp.sourcemaps and also provided as option to gulp-sass but the similar bug I can see. However, as soon as I removed bootstrap from gulp-sass includedPaths the sourcemaps are fine. Seems a problem with node-sass ?

alexander-akait · 2018-11-23T09:32:36Z

@ankurarora yep, in sass-loader we have some problem in source map due node-sass

alexander-akait · 2018-12-11T21:50:42Z

Somebody please create minimum reproducible test repo? Each +1/Same issue/Any updates will be ignore and marked as abuse because it is clogs thread.

bramvdpluijm · 2019-01-07T12:02:47Z

Same issue here. I'm using this config and order:

{ test:/\.(s*)css$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { sourceMap: true, importLoaders: 1 } }, { loader: 'postcss-loader', options: { config: { path: './config' }, sourceMap: true } }, { loader: 'sass-loader', options: { sourceMap: true } }, ] },

And the plugin definition looks like this:

plugins: [ new LoadablePlugin(), new MiniCssExtractPlugin({ filename: devMode ? 'dist/[name].css' : 'dist/[name].[hash].css', }), ],

octoshrimpy · 2019-01-10T03:11:48Z

There is a problem with node-sass at the moment, and it breaks when handling sourcemaps and variables (mine broke when handling maps)

Get yourself:

webpack-shell-plugin,
a batch file called compile-sass.bat at root with a couple lines of

start /b node-sass --output-style compressed ./path/to/entry.scss ./path/to/output.css --source-map-embed

mini-css-extract-plugin, with these configs in your plugins

new MiniCssExtractPlugin( {
            filename: '..path/to/[name].css',
            chunkFilename: 'path/to/[id].css',
            sourceMap: true
        } ),
        new webpackShellPlugin( {
            onBuildStart: [ `compile-sass.bat` ]
        } ),

after that, include the individual files(one file per line in your batfile) if in development, and if in production, just include the single main.css that doesn't have any sourcemaps, cause those don't belong in production.

Hope this helps someone.

alexander-akait · 2019-01-10T08:51:35Z

Please create minimum reproducible test repo, otherwise issue was closed to avoid spamming (many example above has invalid copnfiguration and/or use old version of loaders/plugins/webpack)

octoshrimpy · 2019-01-10T19:18:01Z

@evilebottnawi here's the minimum viable reproducible:
node-sass --output compact input.scss output.css --source-map
on any scss/sass file with a map.

It's not your plugin, it's node-sass itself.

alexander-akait · 2019-01-11T11:26:11Z

@octoshrimpy Yep, as i said above node-sass have some problems with source map and we can't do something on our side to fix it.

Closing issue, feel free to feedback.

amarraja · 2019-01-11T16:44:47Z

@octoshrimpy thanks for looking into this. You can pass the sourceMapEmbed property directly in your webpack config, rather than using a sub-shell. This worked for me:

{
    loader: "sass-loader",
    options: {
        sourceMap: true,
        sourceMapEmbed: true,
        includePaths: [
            path.resolve(__dirname, "scss")
        ]
    }
}

luxueyan · 2019-01-18T03:11:33Z

Using devtool: 'inline-cheap-source-map' provisionally works for me

Antoinebr · 2019-02-24T00:17:17Z

I eventually found my issue in the original codebase I had the problem in... Similar to above, we were using postcss-loader and weren't setting sourceMap: true.

Moral of the story, set sourceMap in every loader ... which feels a little smelly given that Webpack has a root devtool config option ... I would have thought every loader would respect that option 🤔

This worked for me :)

             {
                        loader: "postcss-loader",
                        options: {
                            plugins: [
                                require('autoprefixer')({
                                    browsers: ['last 2 versions', 'ie > 8']
                                })
                            ],
                            sourceMap: true //⚠️ ⚠️Be sure sourceMap is enabled ⚠️
                        }
                    },

rublev · 2019-03-11T01:27:07Z

any idea how to not use MiniCssExtractPlugin in dev so that HMR works? this is my config for vue.js so far that extracts css and provides working sourcemaps in firefox and chrome

have tried to remove MiniCssExtractPlugin but to no avail.

var MiniCssExtractPlugin = require('mini-css-extract-plugin')
var path = require('path')

module.exports = {
  configureWebpack: {
		devtool: 'source-map',
		resolve: {
		  alias: {
				'include-media': path.join(process.cwd(), '/node_modules/include-media/dist/_include-media.scss'),
				'bourbon': path.join(process.cwd(), '/node_modules/bourbon/core/_bourbon.scss'),
		  }
		},
		module: {
		  rules: [
		  	process.env.NODE_ENV === 'development' ?
				({
				  test: /\.scss$/,
				  use: [
					  MiniCssExtractPlugin.loader,
					  {
						  loader: 'css-loader',
						  options: {
							  sourceMap: true
						  }
					  },
					  {
						  loader: 'sass-loader',
						  options: {
							  sourceMap: true
						  }
					  },
				  ]
			  }) : {},
			  {
			    test: /\.css$/,
			    use: [
			  		process.env.NODE_ENV !== 'production' ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
			  		{ loader: 'css-loader' }
			    ]
			  }
		  ]
		},
		plugins: [
		  new MiniCssExtractPlugin({
				filename: 'custom.css'
		  }),
		]
  }
}

project structure

    ├── package.json
    ├── public
    │   ├── application.css
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── normalize.css
    │   ├── svg
    │   │   ├── check.svg
    │   │   └── menu.svg
    │   └── theme.css
    ├── vue.config.js
    └── src
        ├── assets
        │   └── logo.png
        ├── components
        │   ├── BottomFooter
        │   │   ├── BottomFooter.vue
        │   │   └── style.scss
        │   ├── Navigation
        │   │   ├── Navigation.vue
        │   │   └── style.scss
        │   └── Test
        │       ├── Test.vue
        │       └── style.scss
        ├── containers
        │   └── App
        │       ├── App.vue
        │       └── styles
        │           ├── _base.scss
        │           ├── _custom.scss
        │           ├── _fonts.scss
        │           ├── _vars.scss
        │           ├── shared
        │           │   ├── _animations.scss
        │           │   ├── _buttons.scss
        │           │   ├── _forms.scss
        │           │   ├── _functions.scss
        │           │   ├── _gradients.scss
        │           │   ├── _icons.scss
        │           │   ├── _inputs.scss
        │           │   ├── _links.scss
        │           │   ├── _mixins.scss
        │           │   ├── _modals.scss
        │           │   ├── _selects.scss
        │           │   ├── _shared.scss
        │           │   └── _type.scss
        │           ├── style.scss
        │           └── vendor
        │               └── _vendor.scss
        ├── main.js
        ├── router.js
        ├── svg
        │   ├── check.js
        │   ├── index.js
        │   └── menu.js
        └── views
            ├── Home
            │   ├── Home.vue
            │   └── style.scss
            └── Test
                ├── Test.vue
                └── style.scss

vue component setup

<style lang='scss' src='./style.scss' />

<script>

	export default {
		name: 'test',
	}

</script>

<template>
	<div class='Test'>
		Test
	</div>
</template>

scss setup

@import '~@/containers/App/styles/vars';
@import '~@/containers/App/styles/shared/type';
@import '~include-media';

/* test
************************************************/
	.test {
		border: 10px solid green;
	}

firefox 65.0.1

chrome Version 72.0.3626.121

when cmd+clicking into the property it locates it on the correct line in the correct partial:

however, there is no HMR!

alexander-akait added type: bug help wanted good first issue semver: patch priority: 2 (urgent) labels May 3, 2018

michael-ciniawsky added severity: 3 (broken) and removed semver: patch labels Aug 24, 2018

michael-ciniawsky added this to the 0.5.0 milestone Aug 24, 2018

michael-ciniawsky removed the good first issue label Aug 24, 2018

glen-84 mentioned this issue Dec 14, 2018

Document the sourceMap option in README #285

Closed

alexander-akait closed this as completed Jan 11, 2019

SourceMaps for imported SASS partials don't work #123

SourceMaps for imported SASS partials don't work #123

Comments

gkatsanos commented May 3, 2018 • edited Loading

alexander-akait commented May 3, 2018

gkatsanos commented May 3, 2018

GodOfGrandeur commented May 10, 2018

heyflo commented Jun 2, 2018

davorpeic commented Jun 20, 2018

alexander-akait commented Jun 20, 2018

davorpeic commented Jun 20, 2018

davorpeic commented Jun 20, 2018

cloakedninjas commented Aug 23, 2018

JoshuaSoileau commented Aug 29, 2018

alexander-akait commented Aug 29, 2018

cloakedninjas commented Sep 4, 2018

alexander-akait commented Sep 5, 2018

alexander-akait commented Sep 5, 2018

ezarowny commented Sep 6, 2018 • edited Loading

alexander-akait commented Sep 6, 2018

ezarowny commented Sep 6, 2018

ezarowny commented Sep 6, 2018

ezarowny commented Sep 6, 2018 • edited Loading

ezarowny commented Sep 6, 2018 • edited Loading

ezarowny commented Sep 6, 2018 • edited Loading

CoolGoose commented Sep 23, 2018

cloakedninjas commented Sep 24, 2018

CoolGoose commented Sep 24, 2018

CoolGoose commented Sep 24, 2018

jasongilmour commented Nov 20, 2018

ankurarora commented Nov 22, 2018 • edited Loading

alexander-akait commented Nov 23, 2018

alexander-akait commented Dec 11, 2018

bramvdpluijm commented Jan 7, 2019

octoshrimpy commented Jan 10, 2019

alexander-akait commented Jan 10, 2019

octoshrimpy commented Jan 10, 2019

alexander-akait commented Jan 11, 2019

amarraja commented Jan 11, 2019

luxueyan commented Jan 18, 2019

Antoinebr commented Feb 24, 2019

rublev commented Mar 11, 2019 • edited Loading

gkatsanos commented May 3, 2018 •

edited

Loading

ezarowny commented Sep 6, 2018 •

edited

Loading

ezarowny commented Sep 6, 2018 •

edited

Loading

ezarowny commented Sep 6, 2018 •

edited

Loading

ezarowny commented Sep 6, 2018 •

edited

Loading

ankurarora commented Nov 22, 2018 •

edited

Loading

rublev commented Mar 11, 2019 •

edited

Loading