1

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

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

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

  • 一种使用 Material css 和类的简单方法，例如网格 ...
  • 使用指令
  • 使用 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

为什么 ？

非常感谢你们的帮助

4

2 回答 2

2

首先做：

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

然后：

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


@NgModule({declarations: [...MaterializeDirective],...})
于 2016-11-01T19:20:45.517 回答
0

在你的 style.css

@import "~materialize-css/dist/css/materialize.css";
于 2016-11-01T19:50:20.830 回答