Less 无网页包错误,可以';t从uikit解析.ttf和woff2文件

Less 无网页包错误,可以';t从uikit解析.ttf和woff2文件,less,webpack,Less,Webpack,我对webpack非常熟悉,所以我不确定我是否做错了什么,我希望使用webpack并减少,我已经安装了相应的加载程序,如url加载程序、文件加载程序、减少加载程序 并包含在网页包配置中 loaders: [{ test: /\.jsx?$/, loaders: ['react-hot', 'babel'], include: path.join(__dirname, 'scripts') }, { test: /\.less$/, loader: 'style!css!less'

我对webpack非常熟悉,所以我不确定我是否做错了什么,我希望使用webpack并减少,我已经安装了相应的加载程序,如url加载程序、文件加载程序、减少加载程序

并包含在网页包配置中

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" }*/
我的文件看起来像

@导入“./bower_组件/uikit/less/uikit.less”

html{ 背景色:红色; }

目录

当我尝试运行时,控制台显示:

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.

希望错误对您更清楚,并能帮助我,非常感谢

我建议您用简短的方式编写加载程序

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
和签出变量@图标字体路径它应该是

/bower\u组件/uikit/less/core/icon.less

"../../fonts";

非常感谢,它在更改文件图标后工作。less这里的重点是“&name=[name]-[hash].[ext]”。这将告诉您的应用程序在哪里查找文件。我也遇到了同样的问题,有一段时间我犯了一个错误,“&name=”是webpack添加文件的地方。相反,它是查找文件的地方。这已作为Web包的问题提交并关闭:。希望这对将来的人有所帮助。如何/\(eot | woff | woff2 | ttf | svg | png | jpg)(\?v=\d+。\d+。\d+)$/来支持rogue?v=1.1.1版本参数
"../../fonts";