使用webpack css-loader的Sourcemaps

杰米·赫伯(Jamie Hutber):

我在努力使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')
)
HaNdTriX:
  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')
    ]
    ...
    

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用Webpack ExtractTextPlugin获取CSS输出

webpack sass-loader不生成CSS文件

使用webpack捆绑CSS

在webpack css loader中使用外部样式和多个类名

Webpack:无法使用url()导入加载CSS

如何使用当前Webpack配置从sass-loader获得有效的CSS?

使用webpack内联JavaScript和CSS

在Webpack 2中使用样式加载器加载一些CSS并使用to-string-loader加载一些CSS

在Webpack中使用CSS

Webpack sass-loader无效的CSS

使用Webpack,bookmarklet-loader,样式和css-loader创建书签

Webpack AngularJS Sourcemaps问题

[email protected]:“模块解析失败。您可能需要适当的加载器来处理此文件类型”-尽管使用css-loader和style-loader

Angular Webpack设置:使用Webpack从CSS迁移到sass

在React中将字符串类名称与CSS-loader和Webpack一起使用

使用Webpack将Sass提取为CSS

如何使用webpack渲染CSS

webpack css-loader + file-loader在Win / Mac上的不同结果

Webpack:为什么'style-loader!css-loader!postcss-loader'不处理导入的文件?

尝试在Webpack中使用css-loader以最小化我们的css

Webpack bootstrap.css npm模块无法使用ExtractTextLoader + css_loader解析

如何使用webpack和css-loader仅加载特定的CSS类?

Webpack Extract Text Plugin - Webpack Node API 中的 css-loader 问题

Webpack css-loader:“未找到模块:错误:无法解析 'main.css' in ...”

Webpack 的 Sass Loader:如何获取 CSS 文件而不是内联样式?

无法解析 'css-loader' - Webpack 入门错误

带有 css-loader 的 webpack - 解析错误:';' 预期的

使用 JS 激活 CSS Loader onclick

尽管配置看起来没问题,但 Webpack css-loader 没有处理 css