Sourcemaps с webpack css-loader

Я изо всех сил пытаюсь получить исходные файлы, работающие с css-загрузчиком.Sourcemaps с webpack css-loader

Выход в консоли:

Что документация от CSS-загрузчика говорит:

SourceMaps

To include SourceMaps set the sourceMap query param.

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

источник

2016-05-18 Jamie Hutber

Включить source-maps через WebPack
```
... 
devtool: 'source-map' 
... 
```

Вы можете включить источник-карты для Сасс-файлов, а также

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

Использование extract text plugin для извлечения вашего css в файл.
```
... 
plugins: [ 
    ... 
    new ExtractTextPlugin('file.css') 
] 
... 
```

источник

2016-05-22 17:43:21 HaNdTriX

Извините за задержку, меня не было, когда мне нужно было исправить это: D. Если я включаю 'css-loader? SourceMap' в разделе' sass', я получаю следующую ошибку: 'Отказано, чтобы загрузить таблицу стилей 'blob: http% 3A // localhost% 3A4004/c220aee3-8b79-49f8-b487-022859dbef73 'потому что это нарушает следующую директиву политики безопасности содержимого: «style-src» self' 'unsafe-inline' ".' Я действительно задаюсь вопросом, неправильно ли я использую sass и css-модуль. –

Хорошо, вышеупомянутая ошибка, поскольку это было вызвано мета безопасность данных, которую я установил, взятый из примера. Теперь я установил ваш пример put, и у меня есть он, показывающий мне, что он из файла 'main.scss', но sourcemaps все еще не работают, поскольку он не показывает номер строки или имя файла правильно. –

Я поддерживаю ваш ответ, потому что параметры '? Sourcemap' на загрузчике scss - это то, что нужно. @D –

Есть некоторые свойства, которые необходимо установить в вашем 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 по умолчанию нет отладки. Вместо того, чтобы устанавливать его в свой конфиг, вы также можете передать флаг -d или --debug на webpack-dev-server через CLI.

источник

2016-05-27 18:01:16

К сожалению, это не меняет моего результата. Он по-прежнему отображает внутри инспектора –

Вы правы, я что-то упустил. Исходные карты были включены моей конфигурацией postcss. –

Sourcemaps с webpack css-loader

ответ

Смежные вопросы