I am struggling to get sourcemaps working with css-loader.
Output in console:
What the documentation from css-loader says:
SourceMaps
To include SourceMaps set the sourceMap query param.
require("css-loader?sourceMap!./file.css")
My 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" }
]
}
}
How i include the 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')
)
Enable source-maps via webpack
...
devtool: 'source-map'
...
You might want to enable source-maps for Sass-Files as well
module: {
loaders: [
...
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader?sourceMap',
'sass-loader?sourceMap'
]
}, {
test: /\.css$/,
loaders: [
"style-loader",
"css-loader?sourceMap"
]
},
...
]
}
Use extract text plugin to extract your css into a file.
...
plugins: [
...
new ExtractTextPlugin('file.css')
]
...