0

我从模块加载 flat-ui.less 时遇到问题。需要帮忙。

我需要像这样的 flat-uirequire('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

知道这里发生了什么吗？

提前致谢。

4

1 回答 1

0

这里的问题是您的应用程序正在 /Users/Hao/Documents/project/node_modules/flat-ui/less 中寻找 lato-black.eot，但它不存在。那是因为它是在其他地方创建的，我猜是 /Users/Hao/Documents/project/public。在任何情况下，找到它的创建位置，然后将其添加到您的 webpack.config.js 中：

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

这将告诉您的应用程序在哪里查找所有 eot 文件。您也可以对所有其他文件类型执行相同操作。这是 webpack github 上已关闭问题的链接：https ://github.com/webpack/file-loader/issues/32 。希望这可以帮助。

于 2016-02-06T08:11:17.287 回答