source - webpack min css

Sourcemaps con webpack css-loader

Question

Estoy luchando para que los sourcemaps trabajen con css-loader.

Salida en consola:

Lo que dice la documentación de css-loader:

SourceMaps

Para incluir SourceMaps, configure el parámetro de consulta de sourceMap.

require ("css-loader? sourceMap! ./ file.css")

Mi webpack.config

var webpack = require(''webpack'')

module.exports = {
  entry: ''./src/client/js/App.js'',

  output: {
    path: ''./public'',
    filename: ''bundle.js'',
    publicPath: ''/''
  },

  plugins: process.env.NODE_ENV === ''production'' ? [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin()
  ] : [],

  module: {
    loaders: [
      { test: //.js$/, exclude: /node_modules/, loader: ''babel-loader?presets[]=es2015&presets[]=react'' },
      { test: //.scss$/, loaders: [''style'', ''css'', ''sass'']},
      { test: //.css$/, loader: "style-loader!css-loader?sourceMap!./file.css" },
      { test: //.png$/, loader: "url-loader?limit=100000" },
      { test: //.jpg$/, loader: "file-loader" }
    ]
  }
}

Como incluyo el sass

import React from ''react''
import { render } from ''react-dom''
import { Router, browserHistory } from ''react-router''
import routes from ''./routes''
import ''../scss/main.scss''

render(
  <Router routes={routes} history={browserHistory}/>,
  document.getElementById(''app'')
)

Answer 1

1. Habilitar source-maps través de webpack

   ...
   devtool: ''source-map''
   ...

2. Es posible que desee habilitar los mapas de origen para Sass-Files también

   module: {
     loaders: [
       ...
       {
         test: //.scss$/,
         loaders: [
           ''style-loader'',
           ''css-loader?sourceMap'',
           ''sass-loader?sourceMap''
         ]
       }, {
         test: //.css$/,
         loaders: [
           "style-loader",
           "css-loader?sourceMap"
         ]
       },
       ...
     ]
   }

3. Use el complemento de extracción de texto para extraer su css en un archivo.

   ...
   plugins: [
     ...
     new ExtractTextPlugin(''file.css'')
   ]
   ...

Answer 2

Hay algunas propiedades que debes configurar en la configuración de tu paquete web.

{
   output: {
      ...
   },

   debug: true, // switches loaders into debug mode
   devtool: ''eval-cheap-module-source-map'', // or one of the other flavors, not entirely sure if this is required for css source maps
   ...
}

El servidor webpack dev no tiene depuración activada de forma predeterminada. En lugar de configurarlo en su configuración, también puede pasar el indicador -d o --debug a webpack-dev-server través de la CLI.