Webpack 4 с Sass-loader & resolve-url-loader-пути Изображения не найдены

минимально воспроизводимая настройка здесь: https://github.com/jamesopti/webpack_playground/tree/resolve_url_loader_issue

Im пытается использовать resolve-url-loader добавить hashname на мой СКС url() пути изображения, но у меня есть чертовски много времени, чтобы заставить его работать с webpack 4. У меня есть куча изображений в /static/img/** на которые ссылаются в моем SCSS, как:

span.arrow {
  background: url(/static/img/audiences.png);
}

который заканчивается в моем css как точно то же самое (resolve-url-loader не находит их)

когда я запускаю следующую конфигурацию через webpack, я вижу, что resolve loader находит правильный url() и его путь, но режим отладки говорит, что не найден.

resolve-url-loader: /static/img/audiences.png
  /Users/usr1/webpack_playground/src
  /Users/usr1/webpack_playground/static/img
  NOT FOUND

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

  loader: 'resolve-url-loader',
  options: {
    debug: true,
    root: path.join(__dirname, './static/img'),
    includeRoot: true,
    absolute: true,
  },

моя конечная цель состоит в том, чтобы файл-загрузчик преобразовал их в хэшированную версию /dist:

span.arrow {
  background: url(/static/img/audiences-dhsye47djs82kdhe6.png);
}

// Конфигурация правил Webpack

rules: [
      {
        test: /.(png|jpg|gif)$/,
        include: [
          path.resolve(__dirname, './static/img'),
        ],
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]-[hash].[ext]',
          },
        },
      },
      {
        test: /.svg$/,
        use: {
          loader: 'svg-inline-loader',
          options: {
            name: '[name]-[hash].[ext]',
          },
        },
      },
      { test: //src/js/(?:.*).css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] },
      {
        test: [/.scss$/, /.sass$/],
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'resolve-url-loader',
            options: {
              debug: true,
              root: './static/img',
              includeRoot: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              outputStyle: 'compressed',
              sourceMap: true,
              includePaths: [
                './src'
              ],
            },
          },
        ],
      },
]
6
resolve-url-loader sass-loader webpack

2 ответов

у меня была та же проблема. Я верю вам нужно url-loader для правильной загрузки изображений с помощью Webpack 4. Эта настройка сработала для меня:

rules: [
    {
        test: /\.(png|jpg)$/,
        loader: "url-loader",
    }, {        
        test: /\.(scss|css)$/,
        use: [
            "style-loader",
            "css-loader",
            "sass-loader",
        ]
    }
]
0

оказывается, все, что мне было нужно, это file-loader делать то, что я хотел.

когда изображение (соответствующее моим указанным расширениями файлов) встречается любым из загрузчиков css/sass/style, его обрабатывают через file-loader, который копирует его в выходной каталог, указанный с указанным форматом именования, и возвращает имя загрузчика sass для использования в качестве имени файла.

rules: [
  {
    test: /\.(png|jpg|gif|svg)$/,
    exclude: [
      path.resolve(__dirname, './node_modules'),
    ],
    use: {
      loader: 'file-loader',
      options: {
        name: '[path][name]-[hash].[ext]',
        outputPath: '../',
        publicPath: '/dist',
      },
    },
  },
  {
    test: /\.svg$/,
    include: [
      path.resolve(__dirname, './node_modules'),
    ],
    use: {
      loader: 'svg-inline-loader',
      options: {
        name: '[name]-[hash].[ext]',
      },
    },
  },
  { test: /\/src\/js\/(?:.*)\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] },
  {
    test: [/\.scss$/, /\.sass$/],
    use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          root: path.resolve(__dirname),
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: () => [
            autoprefixer({
              'browsers': ['last 2 versions', 'ie >= 10'],
            }),
          ],
          sourceMap: true,
        },
      },
      {
        loader: 'sass-loader',
        options: {
          outputStyle: 'compressed',
          sourceMap: true,
          includePaths: [
            './src/scss',
          ],
        },
      },
    ],
  },
  {
    test: /\.html$/,
    use: [
      {
        loader: 'html-loader',
        options: {
          root: path.resolve(__dirname),
        },
      },
    ],
  },
  {
    test: [
      /\/bundles\/(?:.*)\.js$/,
    ],
    use: {
      loader: 'babel-loader',
    },
  },
];
0