[英]Sourcemaps with webpack css-loader
I am struggling to get sourcemaps working with css-loader. 我正在努力让源代码使用css-loader。
Output in console: 控制台输出:
What the documentation from css-loader says: 来自css-loader的文档说:
SourceMaps
SourceMaps
To include SourceMaps set the sourceMap query param.
要包含SourceMaps,请设置sourceMap查询参数。
require("css-loader?sourceMap!./file.css")
要求( “CSS-装载机?sourceMap!./ file.css”)
My webpack.config 我的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" }
]
}
}
How i include the sass 我如何包括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')
)
Enable source-maps via webpack 通过webpack启用源映射
... devtool: 'source-map' ...
You might want to enable source-maps for Sass-Files as well 您可能还想为Sass-Files启用源映射
module: { loaders: [ ... { test: /\\.scss$/, loaders: [ 'style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap' ] }, { test: /\\.css$/, loaders: [ "style-loader", "css-loader?sourceMap" ] }, ... ] }
Use extract text plugin to extract your css into a file. 使用提取文本插件将您的CSS提取到文件中。
... plugins: [ ... new ExtractTextPlugin('file.css') ] ...
There are some properties you need to set in your webpack config. 您需要在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
...
}
The webpack dev server doesn't have debug on by default. 默认情况下,webpack dev服务器没有启用调试。 Instead of setting it in your config, you can also pass the -d or --debug flag to
webpack-dev-server
via the CLI. 您也可以通过CLI将-d或--debug标志传递给
webpack-dev-server
,而不是在配置中设置它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.