Webpack SCSS - Wrong file and line in sourcemap

416 views Asked by At

sourcemaps lists the wrong file and line

Example:

if i have class .example in my SCSS file in line 8, sourcemaps will list it in line 3246
clicking on the source in the dev tools redirects you to line 8 in the SCSS file where u can see the class isn't listed there
checking the CSS file u see .example in line 3246.

Things i tried:

  • Changing devtool to either source-map or inline-source-map
  • Adding sourceMap query to resolve-url-loader
  • Removing ExtractTextPlugin

Webpack Config:

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require('path');

module.exports = {
    devtool: 'eval',
    debug: true,

    entry: {
        app: path.resolve(__dirname, './site/js/app.js'),
        vendor: path.resolve(__dirname, './site/js/vendor.js')
    },
    output: {
        path: path.resolve(__dirname, './site/dist'),
        publicPath: '/dist/',
        filename: '[name].bundle.js',
        chunkFilename: '[id].chunk.js'
    },
    module: {
        loaders: [
            { //Handle HTML Templates
                test: /\.html$/,
                exclude: /partials/,
                loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './site')) + '/!html'
            }, { //Handle HTML Partials
                test: /\.html$/,
                include: /partials/,
                loader: 'ng-cache?prefix=partials'
            }, { //Handle Images
                test: /\.(gif|png|jpe?g|svg)$/i,
                loaders: [
                    'file?hash=sha512&digest=hex&name=images/[name].[hash].[ext]',
                    'image-webpack'
                ]
            } , { //Handle Fonts
                test: /\.(eot|otf|ttf|woff|woff2)$/i,
                loader: 'file?hash=sha512&digest=hex&name=fonts/[name].[hash].[ext]'
            } , { //Handle SCSS
                test: /\.scss/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!resolve-url-loader!sass-loader?sourceMap")
            }
        ]
    },
    htmlLoader: {
        ignoreCustomFragments: [/\{\{.*?}}/],
        root: path.resolve(__dirname, './site/'),
        attrs: ['img:src', 'img:ng-src']
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor'],
            minChunks: Infinity
        }),
        new ExtractTextPlugin("[name].css"),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './site/templates/index.ejs'),
            filename: path.resolve(__dirname, './views/home.ejs'),
            minify: {
                removeComments: true
            }
        }),
        new ScriptExtHtmlWebpackPlugin({
            defer: [/app/, /vendor/],
            defaultAttribute: 'async'
        })
    ]
};

package.json

"dependencies": {
    ...
  },
  "devDependencies": {
    "angular-mocks": "^1.5.8",
    "autoprefixer": "^6.5.3",
    "chai": "3.5.0",
    "colors": "1.0.3",
    "concurrently": "^2.2.0",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-batch": "^1.0.5",
    "gulp-sass": "^2.3.1",
    "gulp-sass-lint": "^1.2.0",
    "gulp-sourcemaps": "^1.6.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.22.0",
    "image-webpack-loader": "^2.0.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-firefox-launcher": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.2.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "mocha": "3.1.0",
    "ng-annotate-webpack-plugin": "^0.1.3",
    "ng-cache-loader": "0.0.21",
    "ngtemplate-loader": "^1.3.1",
    "node-sass": "^3.13.0",
    "nodemon": "1.2.1",
    "postcss-loader": "^1.2.0",
    "resolve-url-loader": "^1.6.0",
    "rimraf": "^2.5.4",
    "sass-loader": "^4.0.2",
    "sassdoc": "^2.1.20",
    "script-ext-html-webpack-plugin": "^1.3.0",
    "strip-loader": "^0.1.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "webpack-merge": "^0.14.1"
  }
0

There are 0 answers