带有源映射和 url 语句的 Webpack sass 加载器答案

【问题标题】：Webpack sass loader with sourcemaps and url statements带有源映射和 url 语句的 Webpack sass 加载器
【发布时间】：2016-02-27 06:36:24
【问题描述】：

我已经读过，为了获得源映射，我必须在 url('') 语句中使用绝对 URL。我是这样做的：

body
    background-image: url('/elements/assets/tmp_background.jpg')

当我从 css 加载器中删除 sourceMap 选项时它可以工作，如果我激活它则不会。

我想我可能在绝对路径点的某个地方失败了，你有什么想法吗？

这是我的配置文件：

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    path.resolve(__dirname, 'elements/main.js'),
  ],
  output: {
    path: 'dist',
    publicPath: '/',  // Prefix for all the statics urls
    filename: 'bundle.js',
  },
  resolve: {
    root: path.resolve(__dirname),
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets[]=es2015',
      },
      { test: /\.css$/,  loaders: ['style', 'css'] },
      { test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap'] },
      { test: /\.sass$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap&indentedSyntax=true'] },
      { test: /\.jade$/, loaders: ['ngtemplate', 'html', 'jade-html'] },
      { test: /\.(png|gif|jp(e)?g)$/, loader: 'url-loader?limit=8192' },
      { test: /\.(ttf|eot|svg|woff(2))(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=50000' },
    ],
  },
};

在更一般的想法上，我找不到我正在尝试做的工作示例。如果你能把我重定向到那个，我会很感兴趣。

【问题讨论】：

标签： javascript sass webpack sass-loader

【解决方案1】：

publicPath 可用于解决此问题，直到出现更清洁的解决方案。

见https://github.com/webpack/css-loader/issues/29

【讨论】：

我无法让它工作。你能给我一个例子吗？我的 webpack.config.js 中有：module.export = {...output: { publicPath: 'http://localhost:3000/', ...}，但除非我从加载器字符串中删除 ?sourceMap，否则我仍然无法加载图像。
这个解决方案实际上只适用于开发模式，因为http://localhost:3000/ 不是产品的 URL。我最终在生产中禁用了 CSS 源映射......
我在开发模式下运行，它根本不适合我。我也不需要生产中的源映射，所以我没有启用它们，所以那里一切正常。实际上我最终只使用了 extract-text-plugin，它现在对我有用。