作者:何氏眼科-李剑华_951_745 | 来源:互联网 | 2023-02-01 09:46
正如标题中的解释,我正在尝试将Materialise集成到我的Angular 2项目中.
该项目由" AngularCli " 生成
我正在使用" Webpack "和" Scss "
我找到的tuto都是不同的我不明白如何使用scss:
- 物化网站tuto
- Npm网站
我的角度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": {
}
}
}
我的项目在资产中添加了物化文件:
![](https://img.php1.cn/3cd4a/1eebe/cd5/6789f68dabde0aed.png)
1> Vamshi..:
有许多方法可以使用MaterialiseCSS框架.
在安装之前要记住几件事
虽然它有CSS名称,但它不仅仅是一个CSS框架.我们也可以使用它的SCSS
它不是为Angular构建的
它是一个基于jquery构建的组件框架.虽然我们不应该在角度使用jquery(不建议),但我们仍然导入.
您可以使用以下任何方法:
CDN
资产
包含在Angular(NPM)中
每个都有自己的优点和缺点.
CDN
只需添加它index.html
,你就可以了.
资产
将其添加为项目中的资产.这有助于在本地构建和运行时不依赖于Internet.
下载jQuery
下载CSS版本
提取它们
复制materialize.min.css
,jquery-3.2.1.min.js
并materialize.min.js
在您的资产文件夹中
将它们添加到index.html
包括角度(NPM)
在这个方法中,我们直接将文件包含到角度构建中.我假设角度项目是@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集成:
上述所有安装方法都提供了实现的全部功能,无需进一步安装任何角度工作.举个例子,只需在角度组件的HTML部分中使用适当的HTML结构,就可以了.
在某些情况下,您可能需要修改Javascript,为此我们需要使用jQuery.而不是我们可以在angular2-materialize处使用角度包装开发者.我开发了一个使用角度和物化的全功能站点,从来没有感觉到需要.
如果你仍然相信你需要它.您可以按如下方式安装:
使用上述任何方式安装实现
安装angular2-materialize
npm install angular2-materilize --save
添加角度 app.module.ts
import { MaterializeModule } from "angular2-materialize";
@NgModule({
imports: [
//...
MaterializeModule,
],
//...
})
按照主页中提供的其他示例进行操作 angular2-materialize