2014-10-23 2 views
0

У меня проблема с загрузкой плоского модуля с модуля. Нужна помощь.проблема с загрузчиком с webpack

Я требую плоский-UI, как это require('flat-ui/less/flat-ui.less'); также версии для каждого загрузчика, связанных являются "less-loader": "^0.7.7","css-loader": "^0.9.0","style-loader": "^0.8.1",

Мой webpack.config.js как это:

var path = require("path"); 
    var webpack = require("webpack"); 
    module.exports = { 
     // This is the main file that should include all other JS files 
     entry: "./public/scripts/main.jsx", 
     target: "web", 
     debug: true, 
     devtool: "source-map", 
     // We are watching in the gulp.watch, so tell webpack not to watch 
     watch: true, 
     watchDelay: 300, 
     output: { 
     path: path.join(__dirname, "dist", "assets"), 
     publicPath: "/assets/", 
     // If you want to generate a filename with a hash of the content (for cache-busting) 
     // filename: "main-[hash].js", 
     filename: "main.js", 
     chunkFilename: "[chunkhash].js" 
     }, 
     resolve: { 
     // Tell webpack to look for required files in bower and node 
     modulesDirectories: ['bower_components', 'node_modules', 'public'], 
     fallback: ['./public'] 
     }, 
     module: { 
     loaders: [ 
      { test: /\.css$/, loader: "style-loader!css-loader" }, 
      { test: /\.less$/, loader: "style-loader!css-loader!less-loader" }, 
      { test: /\.gif/, loader: "file-loader!url-loader?limit=10000&minetype=image/gif" }, 
      { test: /\.jpg/, loader: "file-loader!url-loader?limit=10000&minetype=image/jpg" }, 
      { test: /\.png/, loader: "file-loader!url-loader?limit=10000&minetype=image/png" }, 
      { test: /\.jsx/, loader: "jsx-loader" }, 

      // required for bootstrap/flat-ui 
      { 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" }, 
     ], 
     noParse: /\.min\.js/ 
     }, 
     plugins: [ 
     // If you want to minify everything 
     new webpack.optimize.UglifyJsPlugin() 
     ] 
    }; 

К сожалению, я получил эту

ERROR in ./~/css-loader!./~/less-loader!./~/flat-ui/less/flat-ui.less 
Module not found: Error: Cannot resolve 'file' or 'directory' ./fonts/lato/lato-black.eot in  /Users/Hao/Documents/project/node_modules/flat-ui/less 
@ ./~/css-loader!./~/less-loader!./~/flat-ui/less/flat-ui.less 2:66-104 2:118-156 

Любая идея о том, что здесь происходит?

Заранее спасибо.

+0

убедитесь, что ваш '@ local-font-path:" ../fonts/lato/";' в variables.less установлен в правильный путь, и ваш каталог шрифтов завершен (у вас должен быть шрифт// css на том же уровне) –

+0

hmm, I 'npm install flat-ui', и патч такой же, как вы сказали. Но все же проблема – haohcraft

+0

npm устанавливает 'каталог' в' node_modules', а ваш скомпилированный код css находится в 'public/dist/css', поэтому вы должны скопировать каталог' font' в 'public/dist /' too –

ответ

0

Проблема здесь в том, что ваше приложение ищет lato-black.eot в/Users/Hao/Documents/project/node_modules/flat-ui/less, но его там нет. Это потому, что он создается где-то в другом месте, я угадываю/Users/Hao/Documents/project/public. В любом случае, найти, где она создается, а затем добавить это к вашему webpack.config.js:

{ test: /\.eot$/, loader: "file-loader&name=./path/to/file/[hash].[ext]" } 

Это покажет ваше приложение, где искать все файлы СРВ. Вы можете сделать то же самое со всеми другими типами файлов. Вот ссылка на закрытую тему на webpack github: https://github.com/webpack/file-loader/issues/32. Надеюсь это поможет.

Смежные вопросы