logo标签列表

使用Sourcemaps和URL语句的Webpack Sass Loader

javascriptsasswebpacksass-loader
5

我了解到，要生成源代码映射（source maps），必须在 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' },
    ],
  },
};

更普遍地说，我找不到一个有效的示例来演示我正在尝试做的事情。如果您可以将其重定向给我，我会非常感兴趣。

1个回答
1
我无法让它正常工作。你能给我一个例子吗？在我的webpack.config.js中，我有：module.export = {...output: { publicPath: 'http://localhost:3000/', ...}但是除非我从加载器字符串中删除?sourceMap，否则我仍然无法加载图像。 - Anj
这个解决方案实际上只在开发模式下有效，因为http://localhost:3000/不是生产环境的URL。最终我在生产环境中禁用了CSS源映射... - Raphaël Boucher
我正在开发模式下运行，但是它根本不起作用。在生产环境中，我也不需要源映射，因此我没有启用它们，所以一切都正常。实际上，我最终只使用了extract-text-plugin，现在它对我有用了。 - Anj
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接