Question

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

我可能会遗漏一些微不足道的观点。任何帮助表示赞赏。

Answer 1

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

问题在这里

loader: 'url-loader?limit=10000'

我设置的文件大小限制为 10kb 而不知道它的作用。我加载的图像大小 21kb ！当你复制其他一些webpack配置文件时会发生这种情况:) javascript疲劳的标志！

Answer 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');

Answer 3

我有类似的问题，但图片的扩展名为“.jpeg”。由于某种原因，将扩展名更改为“.jpg”对我有帮助。

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

3 个答案: