NPM + Zurb 基金会 + WebPack : Cannot resolve module 'foundation'

Question

我正在使用 Zurb Foundation 与 WebPack 和 NPM，没有 Bower。

我遇到的问题与以下相同:

https://github.com/zurb/foundation-sites/issues/7386

本质上，当通过 NPM 安装基础站点时，会引用未找到的模块“基础”。错误:

Module not found: Error: Cannot resolve module 'foundation' in c:\Users\Matt\Documents\Projects\test\node_modules\foundation-sites\dist
 @ ./~/foundation-sites/dist/foundation.js 

这是 package.json:

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "foundation-sites": "6.0.5",
    "webpack": "~1.12.6",
    "webpack-dev-server": "~1.2",
    "jquery": "2.1.1"
  }
}

这是 webpack.config.js:

var path = require("path");
var webpack = require("webpack");
module.exports = {
    entry: {
      main: "./app/js/main.js"
    },
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
              },
              { test: /\.vue$/, loader: 'vue' }
        ],
        resolve: {
            modulesDirectories: ['node_modules']
        }
    },
     sassLoader: {
            includePaths: [path.resolve(__dirname, "./node_modules/foundation-sites/scss/")]
          },
    devServer: {
        proxy: {
            '/api/*': {
                target: 'http://localhost:4567',
                secure: false
            }
        }
    }
};

我可以通过 bower 包含基础来解决此问题，但我想消除 bower 并仅使用 NPM。

Answer 1

这是从网络搜索中登陆的常见地方，其中包含与问题中提到的技术相关的初学者问题。

这是我的 Zurb Foundation with SCSS and Webpack Example Project .

随意克隆它。它是通过 Unlicense 获得许可的。

背景

尽管模块兼容性问题已在 Zurb Foundation 的最新(> 6.4)版本中得到解决，但对于初学者来说，基本设置似乎仍然是黑魔法。我认为在某个地方一定有其他可能更好的例子，但我就是找不到它们。我在这里添加了我的学习之旅的成果，希望它能让某人的骑行不那么颠簸。