webpack weniger Fehler, es nicht lösen kann .ttf-und woff2-Dateien von uikit
Ich bin wirklich Neuling mit webpack, also ich bin mir nicht sicher, ob ich was falsch mache, möchte ich nutzen uikit und weniger mit webpack, ich habe installiert die jeweiligen Lader, wie url-loader-Datei-loader,weniger-loader
und in das 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" }*/
]
Ich mein weniger-Datei in die Eingabe-Punkt meiner js-Datei
require("!css!less!../less/main.less")
und meine weniger-Datei sieht wie
@import "../bower_components/uikit/weniger/uikit.weniger";
html - {
background-color: red;
}
Verzeichnis
wenn ich versuche die Konsole ausführen, zeigt dies:
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.
hoffe die Fehler werden viel mehr frei für dich und kann mir helfen,danke so viel
InformationsquelleAutor CocoOS | 2015-07-18
Du musst angemeldet sein, um einen Kommentar abzugeben.
Empfehle ich dir schreiben Lader in einem kurzen Weg
webpack.config.js
Vergessen Sie nicht
Kasse und variable @icon-font-path sollte es
/bower_components/uikit/weniger/core/Symbol.weniger
Der wichtige Punkt hier ist das " &name=[name]-[hash].[ext]'. Das sagt Ihre Anwendung, wo nach den Dateien suchen. Ich hatte das gleiche Problem, und für eine Weile war der Fehler, dass das '&name=' war, wo webpack würde die Dateien hinzuzufügen. Stattdessen, ist es, wo nach den Dateien suchen. Diese eingereicht wurde, und geschlossen wie ein Problem für webpack: github.com/webpack/file-loader/issues/32. Hoffe, das hilft jemand in der Zukunft.
wie etwa /\.(eot|woff|woff2|ttf|svg - |png - |jpg)(\?v=\d+.\d+.\d+)?$/ zur Unterstützung der Schurke ?v=1.1.1 params version
InformationsquelleAutor andrewkslv