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屋!