带有webpack css-loader的源地图 [英] Sourcemaps with webpack css-loader

问题描述

我在控制台输出：

a href =https://i.stack.imgur.com/KbfrC.jpg =nofollow noreferrer>

SourceMaps

要包含SourceMaps设置sourceMap查询参数。

require css-loader？sourceMap！./ file.css）

我的webpack.config >

  var webpack = require（'webpack'）
 
 module.exports = {
 entry：' ./src/client/js/App.js'，
 
输出：{
 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} 
] 
} 
} 
  
 
 
 
 我如何包含sass  
  import从'react-router'中的'react'
 import import {render} from'react-dom'
 import {router，browserHistory} './routes'
 import'../scss/main.scss'
 
 render（
< Router routes = {routes} history = {browserHistory} /> ，
 document.getElementById（'app'）
）
  
 
 
解决方案
 
 
 
 
启用源地图 via webpack 
  ... 
 devtool：'source-map'
 .. 。
  
 
 
 
 
您可能需要为Sass-Files启用源映射
 模块：{
 loaders：[
 ... 
 {
 test： \.scss $ /，
 loaders：[
'style-loader'，
'css-loader？sourceMap'，
'sass-loader？sourceMap'
] 
}，{
 test：/\.css$/，
 loaders：[
style-loader，
css-loader？sourceMap 
] 
}，
 ... 
] 
} 
  
 
 
 
 
使用提取文字插件提取您的css文件。
  ... 
插件：[
 ... 
 new ExtractTextPlugin（'file.css'）
] 
 ... 
  
 
 
 
 
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')
]
...



                        
这篇关于带有webpack css-loader的源地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！