webpack css-loader + file-loader 在 win/mac 上的不同结果

Question

我有这种情况，在 Mac 上工作正常...但是当我在 Windows 计算机上克隆 repo 时，构建生成不同的结果（路径）并且它不工作。

所有路由都是相对于构建路径的：

fonts/abc.ttf

ttf file existing here

styles/styles.less

@font-face {
  font-family: 'abc';
  src: url(../fonts/abc.ttf);
}

examples/example.ts

import '../styles/styles.less';

webpack.config

{
  test: /\.(css|scss|sass|less)$/,
  use: ExtractTextPlugin.extract({
    use: [
      {
        loader: 'typings-for-css-modules-loader',
        options: {
          modules: true,
          importLoaders: 1,
          namedExport: true,
          camelCase: true,
          sourceMap: true,
          localIdentName: '[local]',
        },
      },
      {
        loader: 'postcss-loader',
        options: { plugins: () => [autoprefixer('ie >= 9')] },
      },
    ],
  }),
},
{
  test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
  exclude: /node_modules/,
  use: [{
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      useRelativePath: true,
      outputPath: 'fonts',
    },
  }],
},

在mac环境下，输出正确：

字体放在fonts/abc.ttf
css 文件使用 url(../fonts/abc.ttf)

但是在 windows 中：

字体放在fonts/fonts/abc.ttf
css 文件尝试用 url(fonts/fonts/abc.ttf) 加载它（假定 css 文件放置在 /examples/example.css 中，结果 url 将是 /examples/fonts/fonts/abc.ttf 所以它是一个 404

所以基本上有 2 个问题：

为什么 url 重复（如 fonts/fonts）？
为什么 css 无法正确检测到相对 url 并将 .. 添加到其路径？

而且，最重要的是，为什么 win/mac 中的结果不一样？

Answer 1

错误是由于安装了不同的版本（1.1.6 与 1.1.11）可能是最新的引入了错误，但是安装相同的版本解决了问题。

PS: 由于不同原因清理yarn.lock导致版本不同

webpack css-loader + file-loader 在 win/mac 上的不同结果

webpack css-loader + file-loader different results on win/mac

webpack

css-loader

webpack-file-loader