Webpack не создает правильные пути для изображений в рабочем файле CSS - PullRequest
Новая
       10

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

0 голосов
/ 23 ноября 2018

Чтобы добавить изображения в проект, я использую свойство content: url () css внутри 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 Config : 

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/'
        }
      }
    }

  ]
}

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

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

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

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

Также я не использовал root опция плагина resol-url-loader.Итак, конфигурация webpack для .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
          }
        }
      ]
    }
0 голосов
/ 23 ноября 2018

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

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

...