使用webpack css-loader的源图

时间:2016-05-18 22:40:16

标签: css node.js sass webpack css-loader

我正在努力让源代码使用css-loader。

控制台输出:

enter image description here

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

2 个答案:

答案 0 :(得分:32)

  1. 通过网络包启用source-maps

    ...
    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. 使用extract text plugin将您的CSS提取到文件中。

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

答案 1 :(得分:0)

您需要在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服务器没有启用调试功能。您也可以通过CLI将-d或--debug标志传递给webpack-dev-server,而不是在配置中设置它。