@D1ma5ta

При сборке webpack картинки из css не открываются?

webСобираю проект webpackом, Есть кнопка и у нее с помощью background-image добавлена картинка.
При сборке проекта, картинки попадают в папку, но с измененным названием (я так понял что это нормально). Но на странице картинка не отображается, и даже если я пытаюсь просто открыть эту картинку на ПК, то выдает ошибку.
webpack.config.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  mode: "development",
  entry: path.resolve(__dirname, "src", "index.js"),
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "js/[name].[contenthash].js",
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        loader: "file-loader",
        options: {
          name: "[name].[ext]",
          outputPath: "images",
        },
      },
      {
        test: /\.(wav|mp3)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "sounds",
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.webmanifest$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              outputPath: "",
            },
          },
        ],
      },
    ],
  },
  devServer: {
    open: true,
    compress: true,
    port: 8080,
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
      files: {
        manifest: "./manifest.webmanifest",
      },
    }),
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash:8].css",
      chunkFilename: "css/[name].[contenthash:8].css",
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, "src", "manifest.webmanifest"),
          to: path.resolve(__dirname, "build", ""),
        },
      ],
    }),
  ],
};


путь в style.css выглядит так:
.swap-theme-button {
  background-image: url(../images/sun.png);
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


В собранном файле путь выглядит так:
.swap-theme-button {
  background-image: url(../a84fda19573ee233bb14.png);
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
  • Вопрос задан
  • 116 просмотров
Пригласить эксперта
Ответы на вопрос 1
А если в CSS использовать алиас @

Наверное у вас картинки в src лежат
background-image: url(@/images/sun.png);

А если у вас не в src картинки то добавить алиас пути к директрии с картинками
в webpack.config.js по пути resolve.alias добавить еще алиас пути для картинок
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы