0

我尝试使用 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(...)部分，但它无法解决我的问题。

4

1 回答 1

1

我想通了。在这个webpack.common.js文件中，CopyWebpackPlugin可以将文件和目录复制到 webpack 中。

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

路径与我的项目结构不匹配。而且我改完之后，我.png的s就可以复制到webpack了。在我的.scss文件中，background: url("assets/cloud_two.png");为我工作。

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

dist
    /assets
        cloud_two.png
    main.bundle.js
    vendor.bundle.js
    polypill.bundle.js
于 2016-07-23T16:22:05.090 回答