如何在 webpack 中加载 sass 样式表中使用的图像？

Posted 2023-02-22

【中文标题】如何在 webpack 中加载 sass 样式表中使用的图像？

【英文标题】：How can I load image(s) used in sass stylesheet in webpack?

【发布时间】：2016-05-21 09:36:32

【问题描述】：

我正在使用 Webpack 来捆绑我的模块，并使用 sass 在基于反应的应用程序中进行样式设置。

我使用单独的样式表设置组件的背景图像并将该样式表加载到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;

解决该问题的一种方法是明确要求图像，然后为反应组件创建内联样式。

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

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

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

我可能遗漏了一些琐碎的要点。任何帮助表示赞赏。

【参考方案1】：

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

问题来了

loader: 'url-loader?limit=10000'

我将文件大小限制设置为 10kb，但并不知道它的作用。我正在加载的图像大小为 21kb ！当您复制其他一些 webpack 配置文件时会发生这种情况 :) javascript 疲劳的迹象！

【讨论】：

啊，您希望将图像嵌入到 css 中。很高兴你明白了。

一个……谢谢你没有删除这篇文章。我和你在一起，这在文档的编写方式上是完全不透明的，我假设 10kb 以下的所有内容都将是 dataurl 编码的，其他所有内容都会通过......

【参考方案2】：

当使用 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

您的styles.scss 可以使用相对路径：

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

【讨论】：

我尝试了两种方式。仍然有同样的问题。web-pack 中的 url-loader 有什么问题吗？

【参考方案3】：

我遇到了类似的问题，但图像带有“.jpeg”扩展名。出于某种原因，将扩展名更改为“.jpg”对我有所帮助。