Webpack css yükleyici ile Sourcemaps

Question

Css-loader ile çalışan sourcemaps almak için uğraşıyorum. konsolda

Çıktı:

css-yükleyici belgeleri ne diyor:

SourceMaps

To include SourceMaps set the sourceMap query param.

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

Benim 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" } 
    ] 
    } 
} 

nasıl i

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. ... 
   devtool: 'source-map' 
   ... 
   

Siz de Sass-Files için kaynak-haritalar etkinleştirmek isteyebilirsiniz

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

3. Kullanım extract text plugin WebPack aracılığıyla source-maps etkinleştirme küstahlığı clude css'inizi bir dosyaya ayıklamak için.

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

Answer 2

Eğer webpack config ayarlamak gereken bazı özellikler vardır.

{ 
    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 
    ... 
} 

Webpack dev sunucusu varsayılan olarak hata ayıklama yapamaz. Yapılandırmanızda ayarlamak yerine, -d veya --debug bayrağını CLI aracılığıyla webpack-dev-server'a da geçirebilirsiniz.