将Materialisecss包含到带有Webpack的Angular2项目中

我对Angular2及其生态系统非常新，我试图弄清楚事情如何一起工作。对不起，如果有些问题看起来微不足道。将Materialisecss包含到带有Webpack的Angular2项目中

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

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

使用材料css和类，比如电网一种简单的方法...
- materialize似乎是解决方案。
使用指令
- 我发现angular2-materialize来实现这一目标
使用材料组件作为组件Angular2
- material2是最先进的项目我发现提供这东西。

这是一个很大：D还，我发现材料设计精简版的Angular2，但让它下来，因为它似乎它会被废弃，当材料2会出阿尔法的。

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

好吧，所以我开始安装angular2-materialize，但是我被Webpack封锁了。 GitHub的自述告诉，安装MaterialCSS和angular2-Materialise的：

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

然后导入兑现，CSS样式

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

2）什么是NPM本地安装Materialise的CSS的包，如果我们点后来包括从CDN的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

为什么？

非常感谢您的帮助球员

来源

2016-08-24 Tinostarn

第一DO：

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

则：

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


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

来源

2016-11-01 19:20:45 Agerskov

在你的style.css

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

来源

2016-11-01 19:50:20 Whisher

将Materialisecss包含到带有Webpack的Angular2项目中

回答

相关问题