webpack less error, it can't resolve .ttf and woff2 files from uikit

问题:

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

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" }*/ 

]

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

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

and my less file looks like

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

html{ background-color: red; }

the directory

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

回答1:

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]' } 

Don't forget

npm install url-loader --save-dev 

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

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

"../../fonts"; 

文章来源: webpack less error, it can't resolve .ttf and woff2 files from uikit