Javascript 如何将sass样式表中使用的图像加载到Web包中？

我使用Webpack捆绑我的模块，并使用sass在基于react的应用程序中进行样式设计

我使用一个单独的样式表设置组件的背景图像，并将该样式表加载到

index.js

中。样式表中的所有样式都将应用于该组件，背景图像除外

这是我的样品样式表

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

.show {
    position: relative;
    background: $black $bg-img center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

解决这个问题的一种方法是显式地需要映像，然后为react组件创建内联样式

img1 = document.createElement("img");
img1.src = require("./image.png");

但是我想在样式表加载后立即从我的图像文件夹加载所有图像，而不是单独要求每个图像

我的网页包配置文件是

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=10000' 
     } // inline base64 URLs for <=10k images, direct URLs for the rest
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

module.exports={
devtool:'源映射'，
条目：{
主要内容：[
'网页包开发服务器/客户端？http://localhost:8080',
“webpack/hot/only dev server”，
“./src/index.js”
]
},
输出：{
path:path.join（uu dirname，'public'），
publicPath:“/public/”，
文件名：“bundle.js”
},
插件：[
新建webpack.HotModuleReplacementPlugin（），
新的webpack.NoErrorsPlugin（）
],
模块：{
装载机：[
{
测试：/\.jsx？$/,，
include:path.join（uu dirname，'src'），
加载器：“反应热烈！巴贝尔”
},
{
测试：/\.scss$/,，
包括：path.join（uu dirname，'sass'），
加载程序：[“样式”、“css？源映射”、“sass？源映射”]
},
{ 
测试：/\（png | jpg）$/，
包括：path.join（uu dirname，'img'），
加载器：“url加载器？限制为10000”
}//用于的内联base64 URL使用webpack加载css及其访问的资产时，css需要遵循JavaScript
import
或
require
调用中使用的相同模块命名规则

假设
img
文件夹位于源代码树的根目录中，您应该在scss中这样引用它：

// note there is no leading /, which tells "require()" to start from the root of your source tree
$bg-img: url('img/bg.jpg');

或者完全相对。假设您的源代码如下：

/src/styles.scss
/img/bg.jpg

您的
style.scs
可以使用相对路径：

// note the path is relative to where the style.scss is in your source tree.
$bg-img: url('../img/bg.jpg');

啊……经过长时间的调试，我终于找到了问题所在。正是因为我的愚蠢，我才苦苦挣扎。我想删除这个问题，但我认为这会帮助像我这样的新来者解决类似的问题

问题就在这里

loader:'url loader？limit=10000'

我将文件大小设置为10kb，但实际上并不知道它的作用。我加载的图像大小为21kb！复制其他网页配置文件时会发生这种情况：）javascript疲劳的迹象！
我有类似的问题，但图像扩展名为.jpeg.Ch“.jpg”的ange扩展出于某种原因帮助了我。
我尝试了两种方法。仍然有相同的问题。web pack中的url加载程序有问题吗？啊，你想要嵌入css中的图像。很高兴你找到了它。儿子……感谢你没有删除这篇文章。我同意你的看法，这在文档编写的方式上是完全不透明的，我想med 10kb以下的所有内容都将进行dataurl编码，其他所有内容都将通过…