Webpack: CSS source maps not enabled in development environment

[PrimozRome]

I have updated to the latest webpack template version and the source maps are not working for me in development environment? Any idea how to solve this issue?

https://dl.dropboxusercontent.com/u/1207859/Screen%20Shot%202016-05-16%20at%2015.23.42.png

Webpack configs

    var path = require('path')
    var config = require('../config')
    var utils = require('./utils')
    var projectRoot = path.resolve(__dirname, '../')

    module.exports = {
      entry: {
        app: './src/main.js'
      },
      output: {
        path: config.build.assetsRoot,
        publicPath: config.build.assetsPublicPath,
        filename: '[name].js'
      },
      resolve: {
        extensions: ['', '.js', '.vue'],
        fallback: [path.join(__dirname, '../node_modules')],
        alias: {
          'src': path.resolve(__dirname, '../src'),
          'assets': path.resolve(__dirname, '../src/assets'),
          'components': path.resolve(__dirname, '../src/components')
        }
      },
      resolveLoader: {
        fallback: [path.join(__dirname, '../node_modules')]
      },
      module: {
        preLoaders: [
          {
            test: /\.vue$/,
            loader: 'eslint',
            include: projectRoot,
            exclude: /node_modules/
          },
          {
            test: /\.js$/,
            loader: 'eslint',
            include: projectRoot,
            exclude: /node_modules/
          }
        ],
        loaders: [
          {
            test: /\.vue$/,
            loader: 'vue'
          },
          {
            test: /\.js$/,
            loader: 'babel',
            include: projectRoot,
            exclude: /node_modules/
          },
          {
            test: /\.json$/,
            loader: 'json'
          },
          {
            test: /\.scss$/,
            loaders: ['style', 'css', 'sass']
          },
          {
            test: /\.styl$/,
            loader: 'style-loader!css-loader!stylus-loader'
          },
          {
            test: /\.html$/,
            loader: 'vue-html'
          },
          {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url',
            query: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url',
            query: {
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
          }
        ]
      },
      eslint: {
        formatter: require('eslint-friendly-formatter')
      },
      vue: {
        loaders: utils.cssLoaders()
      }
    }

    var webpack = require('webpack')
    var merge = require('webpack-merge')
    var utils = require('./utils')
    var baseWebpackConfig = require('./webpack.base.conf')
    var HtmlWebpackPlugin = require('html-webpack-plugin')

    // add hot-reload related code to entry chunks
    Object.keys(baseWebpackConfig.entry).forEach(function (name) {
      baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
    })

    module.exports = merge(baseWebpackConfig, {
      module: {
        loaders: utils.styleLoaders()
      },
      // eval-source-map is faster for development
      devtool: '#eval-source-map',
      plugins: [
        // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        // https://github.com/ampedandwired/html-webpack-plugin
        new HtmlWebpackPlugin({
          filename: 'index.html',
          template: 'index.html',
          inject: true
        })
      ]
    })

[hekigan]

Hi!

Same thing for me using SASS.
in App.vue I have:
<style lang="scss" src="assets/sass/app.scss"></style>

This file calls other dependent files in a sub-folder (ex: assets/sass/components/_header.scss).

But in the dev environment (Chrome in this case), only <style></style> shows up which is basically useless for debugging and finding the proper source.

It's possible to reproduce that with the current repo as I did not change anything in the build files.

Anyone has found a way around that?

Thank you for your time :)

[PrimozRome]

@hekigan I was searching for solution but so far haven't found one. I have virtually same situation like you... I hope we can solve this as it is really annoying to debug CSS in Chrome.

[hekigan]

@PrimozRome , I am guessing that some adjusting will be needed in the webpack config for the dev environment.

[chrisvfritz]

@hekigan @PrimozRome Source maps for CSS aren't enabled by default in development. Does changing this line to:

loaders: utils.cssLoaders({ sourceMap: true })

have the effect you desire?

[hekigan]

@chrisvfritz that's perfect! Thanks

[PrimozRome]

@chrisvfritz many thanks for the solution!

[hekigan]

Coming back to the topic, now that we know about the solution (thank you again for that), would it be possible to implement it for this repository for the dev environment by default?

When working as a team, this is a huge benefit.
Even if you work alone, if the project grows or you get back to it after a long time, having the source map is a huge help in DEV environment.

[yyx990803]

CSS source map is disabled by default due to the tradeoffs described here: https://github.com/webpack/css-loader#sourcemaps

You can easily turn it on by forking the official template.

[chrisvfritz]

I'd eventually like to go through and add a lot more comments and links to documentation in the build files, so I'll add a note about development source maps as well. 🙂👍

[hekigan]

@yyx990803 I totally understand that. It is why I was suggesting to enable it only in the DEV environment. On build, it should not be there by default due to performance reasons.

Is there any other issue if being enabled in the webpack.dev.conf.js file?

[yyx990803]

@hekigan it's mostly about the "relative paths are buggy" part. I haven't personally run into that bug, but I don't want people to be surprised by bugs caused by a default configuration.

[hekigan]

@yyx990803 Mmm, right.
I should look into that. I never encountered that issue either.
I will follow the link and try to see if I can replicate the issue and maybe help fix that.
Thank you for your answer and thanks again for a great framework, it's very helpful!

[franciscolourenco]

In development source maps are inlined, what would the problem with be with relative paths? It has been working fine for me.

[chrisvfritz]

@aristidesfl This is an issue to bring up with css-loader. While they still have this warning, we don't want to risk exposing users to difficult-to-diagnose bugs in development.

[Andre741]

I changed the web pack.base.conf.js and it didn't work, after reading this thread further I changed this option (https://github.com/vuejs-templates/webpack/pull/193) and nothing, still doesn't work as expected