webpack较少的错误，它无法解析uikit中的.ttf和woff2文件 [英] webpack less error, it can't resolve .ttf and woff2 files from uikit

问题描述

我真的是webpack的新手，所以我不确定自己做错了什么，我希望使用 uikit 和更少的webpack，我已经安装了相应的加载器，例如url-loader，file-loader，less-loader

I'm really newbie with webpack, so I'm not sure if I'm doing something wrong, I wish use uikit and less with webpack, I've installed the respective loaders like url-loader,file-loader,less-loader

并包含在webpack配置中

and include in the webpack config

loaders: [{
  test: /\.jsx?$/,
  loaders: ['react-hot', 'babel'],
  include: path.join(__dirname, 'scripts')
 },
 {
test: /\.less$/,
loader: 'style!css!less'
},
{
       test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
       loader: "url-loader?limit=10000&minetype=application/font-woff"
 },
{
       test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
       loader: "file-loader"
   },
   {
       test: /\.jpe?g$|\.gif$|\.png$|\.wav$|\.mp3$/,
       loader: "file-loader"
   }
   /*,  <----I ALSO TRY WITH THIS CONFIG....
     { test: /\.woff$/,   loader: "url-loader?prefix=font/&limit=5000&mimetype=application/font-woff" },
     { test: /\.ttf$/,    loader: "file-loader" },
     { test: /\.eot$/,    loader: "file-loader" },
     { test: /\.svg$/,    loader: "file-loader" }*/

]

我在我的js文件的入口点中包含了我的less文件

I include my less file in the entry point of my js file

 require("!css!less!../less/main.less")

我的较少文件看起来像

@import"../bower_components/uikit/less/uikit.less";

@import "../bower_components/uikit/less/uikit.less";

html { 背景颜色:红色； }

html{ background-color: red; }

目录

当我尝试运行控制台时，显示以下内容:

when I try run the console shows this:

ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.eot in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
 @ ./~/css-loader!./~/less-loader!./less/main.less 6:77369-77440 6:77463-77534

ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.woff2 in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
 @ ./~/css-loader!./~/less-loader!./less/main.less 6:77586-77659

ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.woff in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
 @ ./~/css-loader!./~/less-loader!./less/main.less 6:77690-77762

ERROR in ./~/css-loader!./~/less-loader!./less/main.less
Module not found: Error: Cannot resolve 'file' or 'directory' ../bower_components/uikit/less/fonts/fontawesome-webfont.ttf in /home/yo/Downloads/proj/scalaPROJ/activatorPRJ/finatra-seed/react-hot-boilerplate/less
 @ ./~/css-loader!./~/less-loader!./less/main.less 6:77794-77865
webpack: bundle is now VALID.

希望这些错误对您来说更加清楚，可以帮助我，非常感谢

hope the errors will be much more clear for you and can help me,thank so much

推荐答案

我建议您以简短的方式编写装载程序

I recommend you to write loaders in a short way

webpack.config.js

loaders: [
... other loaders
{
    test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
    loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
}

别忘了

npm install url-loader --save-dev

结帐变量@ icon-font-path应该是

And checkout variable @icon-font-path it should be

/bower_components/uikit/less/core/icon.less

"../../fonts";

这篇关于webpack较少的错误，它无法解析uikit中的.ttf和woff2文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！