1

我正面临Webpack这个奇怪的问题。花了几个小时后找不到解决方案。

当我尝试通过此设置图像源时，在我的 jsx 文件中

let img = require('../../../img/imgN.png');

它工作得很好但是当我尝试使用 scss 设置背景图像时

$bg-img: url('../img/bg-img.png');

图像没有被 webpack 加载。

这是我的 webpack 文件

module.exports = {
  devtool: 'source-map',
  entry: {
    main: [
      'webpack-dev-server/client?http://localhost:8080',
      'webpack/hot/only-dev-server',
      './src/index.js'
    ]
  },
  output: {
    path: path.join(__dirname, 'public'),
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
   loaders: [
      {
        test: /\.jsx?$/,
        include: path.join(__dirname, 'src'),
        loader: 'react-hot!babel'
      },
      {
        test: /\.scss$/,
        include: path.join(__dirname, 'sass'),
        loaders: ["style", "css?sourceMap", "sass?sourceMap"]
      },
      {
          test: /\.(png|jpg)$/,
          include: path.join(__dirname, 'img'),
          loader: 'url-loader?limit=30000'
     } // inline base64 URLs for <=30k images, direct URLs for the rest
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
}
4

2 回答 2

1

由于将sourceMap与style-loader一起使用而出现问题。

There is some issue on github for the same problem.

Solution:

1 . While source-maps is enabled

Style-loader uses a Blob, so it requires absolute urls to work.

Changed publicPath: '/public/', to 

publicPath: 'http://localhost:8080/public/',

It worked.

  1. Without source-maps Just remove source map from style loaders.

Now style-loader will use an inline style tag, so there is no problem.

{
        test: /\.scss$/,
        include: path.join(__dirname, 'sass'),
        loaders: ["style", "css", "sass"]
},
于 2016-03-11T19:17:53.563 回答
0

你能试试看 $bg-img: url('~/img/bg-img.png'); 会工作？当我在 bootstrap.scss 文件中尝试 webpack 时，我不得不使用 ~ 修改字体 url（我想我在某处读过它，但你只是给你一些尝试）

于 2016-03-07T18:15:37.077 回答