如标题中所述,我正在尝试将 Materialise 集成到我的 Angular 2 项目中。
项目是用“AngularCli”生成的
我正在使用“Webpack”和“Scss”
我发现的 tuto 各不相同 我不明白如何为 scss 使用:
我的 angular-cli json :
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "accident-chain-web-angular", "ejected": true }, "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico" ], "index": "index.html", "main": "main.ts", "polyfills": "polyfills.ts", "test": "test.ts", "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", "prefix": "app", "styles": [ "assets/scss/main.scss" ], "scripts": [], "environmentSource": "environments/environment.ts", "environments": { "dev": "environments/environment.ts", "preprod": "environments/environment.preprod.ts", "prod": "environments/environment.prod.ts" } } ], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "lint": [ { "project": "src/tsconfig.app.json" }, { "project": "src/tsconfig.spec.json" }, { "project": "e2e/tsconfig.e2e.json" } ], "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "scss", "component": { } } }
我的项目在 Assets 中添加了物化文件:
最佳答案
有很多方法可以使用 MaterializeCSS 框架。
安装前需要注意的事项
- 它不是纯 CSS 框架,尽管它有 CSS 名称。我们也可以使用它的 SCSS
- 它不是为 Angular 构建的
- 它也是一个基于 jquery 的组件框架。虽然我们不应该在 Angular 中使用 jquery(不建议),但我们仍然导入。
您可以使用以下任何方法:
- CDN
- Assets
- 包含在 Angular (NPM) 中
各有优缺点。
内容分发网络
只需将其添加到 index.html
即可。
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<!-- We need jquery first -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
Assets
将其作为 Assets 添加到您的项目中。这有助于在本地构建和运行时不依赖互联网。
- 提取它们
- 将
materialize.min.css
、jquery-3.2.1.min.js
和materialize.min.js
复制到您的 Assets 文件夹中 将它们添加到 index.html
<link rel="stylesheet" href="./assets/materialize.min.css" > <script src="./assets/jquery-3.2.1.min.js"></script> <script src="./assets/materialize.min.js"></script>
包含在 Angular (NPM)中
在这种方法中,我们直接将文件包含到我们的 Angular 构建中。为简单起见,我假设 Angular 项目是使用 @angular/cli
构建的。
做
npm install materialize-css --save
npm install jquery --save
npm install url-loader --save
将以下内容添加到 .angular-cli.json
:
"styles": [
"styles.scss"
]
"scripts":[
"../node_modules/jquery/dist/jquery.js",
"../node_modules/materialize-css/dist/js/materialize.js"
]
在 styles.scss
中,添加:
$roboto-font-path: "~materialize-css/dist/fonts/roboto/";
@import "~materialize-css/sass/materialize";
与 Angular 集成:
以上所有安装方法都提供了 materialize 的完整功能,无需进一步安装任何东西即可在 angular 中工作。 举个例子,只要在 Angular 组件的 HTML 部分使用适当的 HTML 结构,你就可以开始了。
在某些情况下,您可能需要修改 javascript,为此我们需要使用 jQuery。相反,我们可以使用 angular2-materialize 的 Angular Wrapper 开发人员。 .我使用 angular 和 materialize 开发了一个功能齐全的网站,但从未觉得有必要这样做。
如果您仍然相信自己需要它。您可以按如下方式安装:
- 使用上述任何一种方式安装 materialise
安装 angular2-materialize
npm install angular2-materilize --save
添加 Angular
app.module.ts
import { MaterializeModule } from "angular2-materialize"; @NgModule({ imports: [ //... MaterializeModule, ], //... })
按照 angular2-materialize
主页中提供的其他示例进行操作
关于angular - 使用 webpack 和 SCSS 将 Materialize 集成到 Angular2 项目中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44584557/