Sourcemaps with Webpack css-loader

Question

Sourcemaps with Webpack css-loader

Walczę o sourcemapy współpracujące z css-loader.

Wyjście w konsoli:

Co mówi dokumentacja z css-loader:

SourceMaps

Aby włączyć SourceMaps ustaw parametr zapytania sourceMap.

Require ("css-loader?sourceMap!./ align = "left" / css")

Mój 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" }
    ]
  }
}

Jak włączam 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')
)

17

node.js webpack css sass css-loader

Author: Jamie Hutber, 2016-05-19

Source

2 answers

Są pewne właściwości, które musisz ustawić w konfiguracji 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
   ...
}

Serwer programistyczny webpack nie ma domyślnie włączonego debugowania. Zamiast ustawiać go w konfiguracji, możesz również przekazać znacznik-D lub --debug do webpack-dev-server przez CLI.

0

Author: Thijs Koerselman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-27 18:01:16

score 26 · Accepted Answer

Enable source-maps via webpack
```
...
devtool: 'source-map'
...
```

Możesz również włączyć mapy źródłowe dla plików Sass

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

Użyj rozpakuj wtyczkę tekstową , aby rozpakować swój css do pliku.
```
...
plugins: [
  ...
  new ExtractTextPlugin('file.css')
]
...
```