Как сделать относительный путь для изображений на github pages?

Question

пример css:

.class-name {
  background-image: url("/assets/img/image-name.svg");
}

в dev режиме все изображения на месте, но если сделать build и deploy на github-pages, то картинки перестают отображаться. Если в Инспекторе браузера (и в dev и в gh-pages) в стилях поменять путь на:

.class-name {
  background-image: url("../img/image-name.svg");
}

...то картинка появляется на своём месте в gh-pages и остаётся в dev режиме. Если же такое сделать в самом scss файле в редакторе кода в dev режиме, то получаю ошибку

 ERROR in ./src/components/ui-kit/form-elements/checkbox-buttons/checkbox-buttons.scss (./node_modules/css-loader/dist/cjs.js??ref--8-2!./node_modules/postcss-loader/src??ref--8-3!./node_modules/sass-loader/dist/cjs.js??ref--8-4!./src/components/ui-kit/form-elements/checkbox-buttons/checkbox-buttons.scss)
    Module not found: Error: Can't resolve '../img/checkbox-vector.svg' in 'D:\proj\web\FSD\src\components\ui-kit\form-elements\checkbox-buttons'
     @ ./src/components/ui-kit/form-elements/checkbox-buttons/checkbox-buttons.scss (./node_modules/css-loader/dist/cjs.js??ref--8-2!./node_modules/postcss-loader/src??ref--8-3!./node_modules/sass-loader/dist/cjs.js??ref--8-4!./src/components/ui-kit/form-elements/checkbox-buttons/checkbox-buttons.scss) 4:36-73

webpack config

   /* eslint-disable key-spacing */
/* eslint-disable quote-props */
const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');

const PATHS = {
  src: path.join(__dirname, '../src'),
  dist: path.join(__dirname, '../dist'),
  site_pages: path.join(__dirname, '../src/components/site-pages'),
  ui_kit: path.join(__dirname, '../src/components/ui-kit'),
  assets: 'assets/',
};

//Pages const for HtmlWebpackPlugin
const PAGES_DIR = `${PATHS.src}/pages`;
const PAGES = fs
  .readdirSync(PAGES_DIR)
  .filter((filename) => filename.endsWith('.pug'));

module.exports = {
  externals: {
    paths: PATHS,
  },
  entry: {
    'app': PATHS.src,
    'landing-page': `${PATHS.site_pages}/landing-page/landing-page.js`,
  },
  output: {
    filename: `${PATHS.assets}js/[name].[hash].js`,
    path: PATHS.dist,
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: 'vendors',
          test: /node_modules/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: 'pug-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: '/node_modules/',
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url-loader',
        options: {
          outputPath: 'assets/fonts',
          publicPath: '../fonts',
          name: '[name].[ext]',
          limit: 1000,
        },
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url-loader',
        options: {
          name: '[name].[ext]',
        },
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { sourceMap: true },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              config: { path: `./postcss.config.js` },
            },
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true },
          },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      '~': 'src',
    },
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      $: 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jquery': 'jquery',
      'window.jQuery': 'jquery',
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: `${PATHS.assets}css/[name].[hash].css`,
    }),
    new CopyWebpackPlugin([
      {
        from: `${PATHS.src}/components/**/*.{jpg,jpeg,png,svg,gif}`,
        to: `${PATHS.assets}img`,
        flatten: true,
      },
      { from: `${PATHS.src}/static`, to: '' },
    ]),

    ...PAGES.map(
      (page) =>
        new HtmlWebpackPlugin({
          template: `${PAGES_DIR}/${page}`, // .pug
          filename: `./${page.replace(/\.pug/, '.html')}`, // .html
          chunks: ['app', 'vendors', path.parse(page).name],
        })
    ),

  ],
};

я так понимаю нужно чтобы при билде, пути в строках вида

background-image: url("/assets/img/image-name.svg")

менялись на

background-image: url("../img/image-name.svg")

Или может есть какое-то другое решение?

Answer 1

Тоже когда то парился этой проблемой, но решение так и не удалось найти, плюнул задал полные пути к изображениям... все равно они в СSS обычно не меняются. Можешь попробовать в html прописать base а вдруг поможет....

Answer 2

url("img/image-name.svg")

Вот так будет работать

БЛОГ НА HUSL

Как сделать относительный путь для изображений на github pages?

Ответы (2 шт):