Webpack 2：不要在.less文件

Question

我正在尝试使用较少的编译来运行webpack 2（2.6.1）。 遇到字体问题 - 如果.less文件中有@ font-face则会出现错误。

@charset "UTF-8";
@font-face {
  font-family: 'Exo2Medium';
  src: url("./fonts/Exo2Medium/Exo2Medium.eot");
  src: local("�?�"), url("./fonts/Exo2Medium/Exo2Medium.woff") format("woff"), url("./fonts/Exo2Medium/Exo2Medium.otf") format("opentype");
}

经过一番搜索，我找到了一个可以解决这个问题的解决方案：

module: {
    rules: [
        { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
        { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
        {
            test: /\.less$/,
            use: ExtractTextPlugin.extract({
                loader:[ 'css-loader', 'less-loader' ],
                fallback: 'style-loader'
            })
        },
        {
            test: /\.(png|woff|woff2|eot|ttf|otf|svg)$/, loader: 'url-loader?limit=100000'
        }
    ]
}

但在这种情况下，所有字体都会编译成输出.css文件。 是否可以在.css中保留一个指向字体的链接？

Answer 1

Webpack file-loader是您正在寻找的解决方案。