Question

我有这个案例，在Mac上工作得很好......但是当我在Windows计算机上克隆了repo时，构建会产生不同的结果（路径）而且它不起作用。

所有路线都相对于构建路径：

字体/ abc.ttf

ttf file existing here

风格/ styles.less

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

实例/ 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中，生成的网址将为/examples/fonts/fonts/abc.ttf，因此它是404

所以基本上有两个问题：

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

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

Answer 1

错误是由于安装了不同版本（1.1.6 vs 1.1.11）可能是后期引入了一个错误，但安装相同的版本可以解决问题。

PS：由于各种原因清洁纱线，造成了不同的版本。

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

1 个答案: