require 正在运行 jsx 文件，但 url() resolve 在 sass 文件中不起作用 - webpack

Question

我在使用 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: './'
  }
}

Answer 1

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

Answer 2

出现问题是因为将 sourceMap 与 style-loader 一起使用。

github 上也有同样的问题。

解法：

1。 启用源地图时

样式加载器使用 Blob，因此它需要绝对 url 才能工作。

已将 publicPath: '/public/', 更改为

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

成功了。

没有源地图 只需从样式加载器中删除源映射。

现在 style-loader 将使用内联样式标签，所以没有问题。

{
        test: /\.scss$/,
        include: path.join(__dirname, 'sass'),
        loaders: ["style", "css", "sass"]
},

require 正在运行 jsx 文件，但 url() resolve 在 sass 文件中不起作用 - webpack

require is working jsx file but url() resolve is not wroking in sass file - webpack

reactjs

sass

webpack

webpack-dev-server

webpack-style-loader