Question

你有一些有效的示例配置吗？

为webpack设置：

{
  test: /\.scss$/,
  use: ['style-loader', {
    loader: 'css-loader',
    options: {
      modules: true,
      localIdentName: '[local]--[hash:base64:5]',
    },
  }, 'sass-loader'],
},

用法：

background: url('~assets/arrow-white.svg') center no-repeat;

输出：

Module not found: Error: Can't resolve './assets/arrow-white.svg'

我可以省略~或使用~/../assets但它有效，但我想只使用~。

可能相关的错误：如果与~ https://github.com/webpack-contrib/css-loader/issues/589一起使用，CSS模块会破坏构建

Answer 1

我只是复制你的评论，以便你可以关闭这个问题

问题是css-modules模式改变了路径分辨率和不尊重webpack模块的分辨率

Answer 2

使用此程序包https://github.com/P0lip/url-tilde-loader

// In your webpack config
{
  test: /\.s?css$/,
  use: [
    'style-loader',
    {
      loader: "css-loader",
      options: {
        modules: true,
      },
    },
    {
      loader: 'url-tilde-loader'
      options: {
        replacement: '~/../', // string to replace with
        traverse: false, // use manual traversing
      },
    },
  ]
}

使用css模块的url中的Tilde不起作用

2 个答案: