我在努力使css-loader使用sourcemaps。
在控制台中输出:
来自css-loader的文档怎么说:
源图
要包括SourceMaps,请设置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')
)
通过webpack 启用源地图
...
devtool: 'source-map'
...
您可能还希望为Sass-Files启用源映射
module: {
loaders: [
...
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader?sourceMap',
'sass-loader?sourceMap'
]
}, {
test: /\.css$/,
loaders: [
"style-loader",
"css-loader?sourceMap"
]
},
...
]
}
使用提取文本插件将CSS提取到文件中。
...
plugins: [
...
new ExtractTextPlugin('file.css')
]
...
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句