私はcss-loaderで動作するソースマップを取得するのに苦労しています。コンソールで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')
)
遅れて申し訳ありませんが、私はこの問題を解決する必要があるときに私は離れていました。 'css-loader?sourceMap'を' sass'セクションに含めると、 'スタイルシートをロードするのが拒否されました 'というエラーが表示されます:http%3A // localhost%3A4004/c220aee3-8b79-49f8-b487-022859dbef73 'これは、以下のコンテンツセキュリティポリシーの指示に違反しているためです: "スタイル-src' self '' unsafe-inline '" '私はsassとcssモジュールを間違って使用しているのだろうかと疑問に思う –
Ok私が設定したデータセキュリティは、例から取ったものです。今私はあなたの例を入れて、それは 'main.scss'ファイルから来ていることを私に示していますが、行番号やファイル名が正しく表示されないため、ソースマップはまだ動作しません。 –
scssローダの '?sourcemap'パラメータが必要なものだったので、私はあなたの答えをアップ投票しています。 @D –