使用 Webpack 将 Materializecss 包含到 Angular2 项目中

Question

我对 Angular2 及其生态系统还很陌生，我试图弄清楚事物是如何协同工作的。抱歉，如果有些问题看起来微不足道。

所以我在 AngularClass starter kit 的帮助下部署了一个全新的 Angular2 应用程序，它使用了 Webpack。

对于 UI，我想使用 Material 而不是 Bootstrap。我做了一些研究，开始迷失在围绕 Material 的大量项目中。我正在寻找的是：

• 一种使用 Material css 和类的简单方法，例如网格 ...
  • materialize 似乎是解决方案。
• 使用指令
  • 我找到了 angular2-materialize 来完成这项工作
• 使用 Material 组件作为 Angular2 组件
  • material2 是我发现的提供这些东西的最先进的项目。

很多 :D 另外，我找到了适用于 Angular2 的 Material Design Lite，但让它失望了，因为当 Material2 退出 Alpha 版时，它似乎会被弃用。

1) 这三个包能很好地协同工作吗？ 我还没有找到任何可以满足我列出的所有需求的包。

好的，所以我开始安装 angular2-materialize，但我被 Webpack 阻止了。 Github 自述文件告诉，安装 MaterialCSS 和 angular2-materialize ：

npm install materialize-css --save
npm install angular2-materialize --save

然后导入materialize-css样式

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

2) 如果我们稍后包含来自 cdn 的 css，那么 npm 在本地安装 materialize-css 包有什么意义？

所以我试图找到一种方法从 node_modules/materialize-css 本地包含 css ......在这里我被阻止了。 NPM 的文档与 Github 不同，还有一些额外的步骤，比如在 webpack 配置中添加别名、加载器和插件。

var webpack = require("webpack");
module.exports = {
  //... 
  resolve: {
    alias: {
      materializecss: 'materialize-css/dist/css/materialize.css',
      materialize: 'materialize-css/dist/js/materialize.js',
      //... 
    }
    //... 
  },
  module: {
    loaders: [
      {
        test: /materialize-css\/dist\/js\/materialize\.js/,
        loader: 'imports?materializecss'
      },
      //... 
    ]
  },
  plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "window.jQuery": "jquery",
          Hammer: "hammerjs/hammer"
      })
  ]
  //... 
};

有了这个配置，我想我可以在我的 vendor.browser.ts 中做类似的事情：

import "materializecss";

它会自动加载和/或放置指向已构建 CSS 的指针。还是我错了，这样不行？

显然它不起作用，我得到一个：

Uncaught Error: Cannot find module "materializecss" - vendor.browser.ts:23

为什么？

非常感谢你们的帮助

Answer 1

先做：

npm install materialize-css --save
npm install angular2-materialize --save

然后：

import "materialize-css";
import { MaterializeDirective } from 'angular2-materialize';


@NgModule({declarations: [...MaterializeDirective],...})

Answer 2

在你的 style.css 中

@import "~materialize-css/dist/css/materialize.css";