Question

我尝试使用webpack sass-loader加载包含背景图片的.scss文件。 .scss的一部分就像

.clouds_two {
  background: url(require("../../../images/cloud_two.png"));   //no error, just not display
  //background: url("../../../images/cloud_two.png");     // 404 error
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_two 75s linear infinite;
  -moz-animation: cloud_two 75s linear infinite;
  -o-animation: cloud_two 75s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}

我的webpack配置文件中的相应加载器设置为

  {
    test: /\.scss$/,
    exclude: /node_modules/,
    loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
  },
  {
      test: /\.(png|jpg|gif)$/,
      loader: 'url-loader?limit=8192'
  }, // inline base64 URLs for <=8k images, direct URLs for the rest

我的.scss文件位于src/app/components/login/，图片位于src/images/。 webpack输出文件夹为dist，与src文件夹的级别相同。

问题是当我使用background: url(require("../../../images/cloud_two.png"));时，没有错误，但背景图片没有显示。

如果我使用background: url("../../../images/cloud_two.png");，则会出现404错误，抱怨http://localhost:8080/images/cloud_two.png。

sass-loader自述文件有一个Problems with url(...)部分，但无法解决我的问题。

Answer 1

我明白了。在此WebSocket handshake: Unexpected response code: 404 -文件中，CopyWebpackPlugin可以将文件和目录复制到webpack中。

new CopyWebpackPlugin([{
  from: 'src/assets',
  to: 'assets'
}]),

该路径与我的项目结构不匹配。在我更改之后，我的.png可以复制到webpack。在我的.scss文件中，background: url("assets/cloud_two.png");适合我。

注意：url()中的路径是相对于webpack输出文件夹的。例如。我的输出文件夹就像

dist
    /assets
        cloud_two.png
    main.bundle.js
    vendor.bundle.js
    polypill.bundle.js

Webpack：加载未显示的scss文件中的背景图像

1 个答案: