Разрешение относительных URL во вложенных файлах стилей с помощью postcss & scss

Я использую postcss с scss synthax для организации стилей в проекте. Упрощенная структура приведена ниже:

client
  media
    images
      image.png
  styles
    index.scss
    components
      component1.scss

Точкой входа для загрузчиков Webpack является client/styles/index.scss.

Если я определю некоторый стиль с помощью выражения url() с относительным путем к image.png - например, url('../media/images/image.png') (например, в свойстве background-image) в index.scss, это будет решаться нормально.

Но если я сделаю то же самое в файле вложенных стилей - styles/component /component1.scss - url('../../media/images/image.png'), который импортирован index.scss - Webpack выдаст ошибку:

Module not found: Error: Can't resolve '../../media/images/image.png' in '/Users/anubis/Projects/Jackal/client/styles'

Кажется, что загрузчик обрабатывает относительные URL во всех вложенных файлах с помощью пути к файлу стиля ввода. Как изменить это поведение?

{
  test: /\.scss$/,
  use: [
    { loader: 'style-loader' },
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        sourceMap: true,
        minimize: true
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        parser: scssParser,
        sourceMap: true,
        plugins: () => [
          require('precss')({
            import: {
              resolve: styleFileResolver
            }
          }),
          require('postcss-font-magician')({
            hosted: ['./client/media/fonts/OpenSans']
          }),
          require('postcss-short')(),
          require('postcss-cssnext')(),
          require('postcss-utilities')()
        ]
      }
    }
  ]
}

Источник

1 ответ

Решение

Вы скучаете по resolve-url-loader, Вы можете попробовать добавить его между загрузчиками css и postcss

Источник
Другие вопросы по тегам