带有 webpack css-loader 的源图

Posted 2023-03-06

【中文标题】带有 webpack css-loader 的源图

【英文标题】：Sourcemaps with webpack css-loader

【发布时间】：2016-09-15 15:00:40

【问题描述】：

我正在努力让 sourcemaps 与 css-loader 一起使用。

控制台输出：

css-loader 的文档是怎么说的：

源地图

要包含 SourceMap，请设置 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" 
    ]
  

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

【参考方案1】：

通过 webpack 启用 source-maps

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

您可能还想为 Sass 文件启用源映射

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

使用 extract text plugin 将您的 css 提取到文件中。

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

【讨论】：

抱歉耽搁了，当我需要修复这个问题时我不在了：D。如果我在sass 部分中包含css-loader?sourceMap，我会收到以下错误：Refused to load the stylesheet 'blob:http%3A//localhost%3A4004/c220aee3-8b79-49f8-b487-022859dbef73' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline'". 我想知道我是否错误地使用了 sass 和 css 模块

好的，上面的错误是由于我设置的元数据安全性，取自一个例子。现在我设置了你的示例，我让它显示它来自文件main.scss，但源映射仍然无法正常工作，因为它没有正确显示行号或文件名。

我赞成您的回答，因为 scss 加载程序上的 ?sourcemap 参数是需要的。 @D

我只是想知道，如何为 JS 应用 devtool: 'eval'（以便更快地进行开发调试）并为 ExtractTextPlugin 启用源映射（没有 devtool: 'source-map' 它不起作用） .

这里是 Webpack 1.13。对我不起作用 - 没有提取 css 文件。我必须将ExtractTextPlugin.extract() 放在加载器中，并作为参数以数组形式传递这些 css 和 sass 加载器。

【参考方案2】：

您需要在 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 开发服务器默认没有调试。除了在配置中设置它，您还可以通过 CLI 将 -d 或 --debug 标志传递给webpack-dev-server。

【讨论】：

遗憾的是，这并没有改变我的结果。它仍然在检查器中显示

你说得对，我忽略了一些事情。我的 postcss 配置打开了源映射。