Quellkarten mit Webpack css-loader

Ich habe Probleme Quellmaps mit css-loader zu erstellen.Quellkarten mit Webpack css-loader

Ausgabe in der Konsole:

Was die Dokumentation von CSS-loader sagt:

SourceMaps

To include SourceMaps set the sourceMap query param.

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

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

Wie ich in Clude die 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') 
)

Quelle

2016-05-18 Jamie Hutber

source-maps über webpack aktivieren
```
... 
devtool: 'source-map' 
... 
```

Vielleicht möchten Sie Quelle-Karten für Sass-Files sowie

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

Verwenden extract text plugin ermöglichen um dein CSS in eine Datei zu extrahieren.
```
... 
plugins: [ 
    ... 
    new ExtractTextPlugin('file.css') 
] 
... 
```

Quelle

2016-05-22 17:43:21 HaNdTriX

Entschuldigung für die Verspätung, ich war gerade weg, als ich das reparieren musste: D. Wenn ich den "css-loader" sourceMap im Abschnitt "sass" einfüge, erhalte ich den folgenden Fehler: 'Abgelehnt, um das Stylesheet zu laden ': http% 3A // localhost% 3A4004/c220aee3-8b79-49f8-b487-022859dbef73 "Weil es die folgende Inhaltssicherheitsrichtlinien-Direktive verletzt:" style-src 'self' 'unsafe-inline' ".' Ich frage mich, ob ich sass und das css-Modul falsch verwende –

Ok der obige Fehler, der auf Meta zurückzuführen war Datensicherheit hatte ich festgelegt, aus einem Beispiel entnommen. Jetzt stelle ich dein Beispiel ein und zeige mir, dass es aus der Datei 'main.scss' stammt, aber Quellkarten funktionieren immer noch nicht, da die Zeilennummer oder der Dateiname nicht korrekt angezeigt wird. –

Ich aktualisiere deine Antwort, weil die '? Sourcemap'-Parameter auf dem scss loader benötigt werden. @ D –

Es gibt einige Eigenschaften, die Sie in Ihrem webpack Config einstellen müssen.

Der Webpack-dev-Server hat standardmäßig kein Debug-On. Anstatt es in Ihrer Konfiguration zu setzen, können Sie das Flag -d oder --debug auch über die CLI an webpack-dev-server übergeben.

Quelle

2016-05-27 18:01:16

Leider ändert das mein Ergebnis nicht. Es zeigt immer noch die im Inspektor –

Sie haben Recht, ich habe etwas übersehen. Quellkarten wurden durch meine postcss-Konfiguration eingeschaltet. –

Quellkarten mit Webpack css-loader

Antwort

Verwandte Themen