22

ソースマップを css-loader で動作させるのに苦労しています。

コンソールでの出力:

ここに画像の説明を入力

css-loader のドキュメントの内容:

ソースマップ

SourceMap を含めるには、sourceMap クエリ パラメータを設定します。

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

私の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" }
    ]
  }
}

サスを含める方法

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')
)
4

2 に答える 2

0

webpack 構成で設定する必要があるプロパティがいくつかあります。

{
   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 サーバーにはデバッグがありません。webpack-dev-serverconfig で設定する代わりに、CLI 経由で-d または --debug フラグを渡すこともできます。

于 2016-05-27T18:01:16.533 に答える