Question

我有一个项目，正在从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');
}

但是我无法通过Web Pack配置解决它。我尝试了此操作，因为我有一个包含图像（以及样式）的子模块。目的是用来在顶部开发另一个应用程序的小概念。

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

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

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

使用Webpack从CSS解析绝对路径

0 个答案: