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

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

使用这个包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
      },
    },
  ]
}