带有webpack css-loader的源文件

我正在努力获得与CSS加载器的源代码。

在控制台中输出：

来自css-loader的文档说：

SourceMaps

要包含SourceMaps，请设置sourceMap查询参数。

要求（ “CSS-装载机？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" } ] } } 

我如何包括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') ) 

Answer 1

1. 通过webpack启用源地图

    ... devtool: 'source-map' ... 

2. 您也可以为Sass-Files启用源地图

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

3. 使用提取文本插件将您的CSS提取到文件中。

    ... plugins: [ ... new ExtractTextPlugin('file.css') ] ... 

Answer 2

你需要在你的webpackconfiguration中设置一些属性。

 { 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服务器在默认情况下不具有debuggingfunction。 除了在你的configuration文件中设置它之外，你还可以通过CLI将-d或–debug标志传递给webpack-dev-server 。