Question

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

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

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

使用Material css和类的简单方法，比如grid ...
- materialize似乎是解决方案。
使用指令
- 我找到angular2-materialize来完成
将材质组件用作Angular2组件
- material2是我发现的最先进的项目。

它很多：D另外，我已经为Angular2找到了Material Design Lite，但是让它失望，因为当Material2不在Alpha时它似乎会被弃用。< / p>

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";

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

2 个答案: