时间戳

首页 > 解决方案 > 使用 Webpack 从 css 解析绝对路径

webpack - 使用 Webpack 从 css 解析绝对路径

问题描述

我有一个项目，我正在从 node_modules 导入 CSS 规则。它们具有指向它们的剪辑路径，带有绝对 URL，因此这些不适用于当前设置。

我正在尝试使用 Webpack 解决它，因为它通常会使其适用于所有图像。

我的 webpack 设置是：

{
  test: /\.(css|scss)?$/,
  use:  ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
},
{
  test: /\.(svg|png|jpg|eot|woff|woff2)?$/,
  include: [
       path.resolve(basePath, 'project/frontend/scss'),
  ],
  use: {
  loader: "file-loader",
  options: {
  name: '[name].[ext]',
  outputPath: 'assets/fonts/'
   }
}

我有一个包含此样式的样式表（来自 node_modules）：

.background {
   background: url('/img/image.svg');
   font-color: '#cecece';
}

样式正在添加到 HTML 中，并且font-colour正在应用中。但是，样式无法解析路径，因为在导入样式时，由于某种原因它无法在其子模块中找到图像，因此另一种选择是使其相对，并允许它找到它：

.background {
   background: url('./img/image.svg');
}

但我无法用我的 webpack 配置解决它。我试过这个，因为我有一个包含图像（以及样式）的子模块。目的是用来开发另一个应用程序的小概念。

但是我不知道如何将路径映射到图像，如果可以避免的话，我不想解析初始项目中的所有图像路径。

它没有给出任何错误，只是没有解析路径'/img/image.svg'。

我尝试了许多解决方案，但都没有成功。所以，我想知道我是否缺少任何想法或解决方案。

标签： webpack

解决方案

推荐阅读