Webpack не создает правильные пути для изображений в производственном файле css

Чтобы добавить изображения в проект, я использую свойство css content: url() внутри файла sass и указываю относительный путь к папке src, например. content: url('/images/right-arrow.svg');.

Проблема в том, что в производственной сборке мне нужно избавиться от первой косой черты, чтобы иметь такой путь ('images/right-arrow.svg') внутри связанного файла css.

Единственный способ получить желаемое поведение - использовать параметр url: false для css-loader и указать путь без косой черты в файле sass: content: url('/images/right-arrow.svg'), но такой параметр не добавляет необходимый файл из node_modules, например. шрифты и изображения.

Конфигурация Webpack:

return {
entry: ['babel-polyfill', './src/app.js'],
output: {
  path: path.join(__dirname, 'public/'),
  filename: '[name].[hash].js',
},
mode: isProduction || 'development',
module: {
  rules: [
    {
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    },

    {
      test: /\.s?css$/,
      use: [
        isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
        {
          loader: 'css-loader',
          options: {
            url: true
          }
        },
        'sass-loader'
      ]
    },

    {
      test: /\.(svg|gif|png)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'images'
        }

      }
    },

    {
      test: /\.(otf|woff2|ttf|eot|woff)$/,
      use: {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: 'fonts/'
        }
      }
    }

  ]
}

Что мне не хватает в конфигурации веб-пакета, чтобы добиться правильной работы путей?


webpack reactjs sass css-loader
person tawreon    schedule 23.11.2018    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Хорошо, я решил проблему. Я использовал resolve-url-loader безрезультатно, прежде чем @Ujin предложил его использовать . После его комментария я пояснил, что делает resolve-url-loader, и правильно настроил его для решить мою проблему. Основная проблема заключается в том, что я пропустил важный абзац документации по разрешению URL-загрузчика, в котором говорится:

исходные карты, необходимые для загрузчиков, предшествующих загрузчику resolve-url-loader (независимо от devtool).

Также я не использовал параметр root плагина resolve-url-loader. Итак, конфигурация веб-пакета для файлов .scss выглядит так:

      test: /\.s?css$/,
      use: [
        isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
        'css-loader',
        {
          loader: 'resolve-url-loader',
          options: {
            root: path.join(__dirname, 'src')
          }
        },
        {
          loader: 'sass-loader',
          options: {
            sourceMap: true,
            sourceMapContents: false
          }
        }
      ]
    }
person tawreon    schedule 26.11.2018

arrow_upward
0
arrow_downward

Ознакомьтесь с документацией о проблемах с url(...). Предлагается использовать resolve-url-loader.

Также вы можете попробовать использовать copy-webpack-plugin

person UjinT34    schedule 23.11.2018
comment
Файлы копируются корректно в общую папку, основная проблема с путями к этим файлам. - person tawreon; 23.11.2018