正如 Headers 中的解释,我正在尝试将Materialise集成到我的Angular 2项目中 .
该项目是用“ AngularCli ”生成的
我正在使用“ Webpack " and " Scss ”
我找到的tuto都是不同的我不明白如何使用 scss :
我的角度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": {
}
}
}
我的项目在资产中添加了物化文件:
2 回答
如果您正在使用Angular CLI(我假设您打算说它使用的是Webpack和SCSS),为什么不将
scss
目录移出src/assets/
目录并将其放入src/
文件夹中,因此您的位置是src/scss/
. 资产通常是应用程序的非编译/处理资源,而不是SCSS的适当位置 .然后你可以改变
至
当您运行cli(
ng serve
或ng build
时,您的SCSS应该构建并与您的应用程序一起提供 .我假设您导入
main.scss
中scss/
目录中的其他SCSS文件 . 否则你可以将它们添加到angular-cli.json
中的styles
数组中有许多方法可以使用MaterialiseCSS框架 .
在安装之前要记住几件事
虽然它有CSS名称,但它不仅仅是CSS框架 . 我们也可以使用它的SCSS
它不是为Angular构建的
它是一个基于jquery构建的组件框架 . 虽然我们不应该在角度使用jquery(不建议),但我们仍然导入 .
您可以使用以下方法的 any :
CDN
资产
包含在Angular(NPM)中
每个都有自己的优点和缺点 .
CDN
只需将其添加到
index.html
就可以了 .资产
将其添加为项目中的资产 . 这有助于在本地构建和运行时不依赖于互联网 .
Download jQuery
Download CSS version
提取它们
在资产文件夹中复制
materialize.min.css
,jquery-3.2.1.min.js
和materialize.min.js
将它们添加到index.html
包括角度(NPM)
在这个方法中,我们直接将文件包含在角度构建中 . 我假设为了简单起见,角度项目是用_472208构建的 .
做
将以下内容添加到
.angular-cli.json
:在
styles.scss
内,添加以下内容:与Angular集成:
上述所有安装方法都提供了materialize和 no need to further install anything to work in angular 的完整功能 . 举个例子,在角度组件的HTML部分中使用适当的HTML结构,你就可以了 .
在某些情况下,您可能需要修改javascript,为此我们需要使用jQuery . 而不是我们可以在angular2-materialize使用角度包装开发人员 . 我开发了一个使用角度和物化的全功能站点,从来没有感觉到需要 .
如果你仍然相信你需要它 . 您可以按如下方式安装:
使用上述任何方式安装实现
安装angular2-materialize
添加角度
app.module.ts
请按照
angular2-materialize
主页中提供的其他示例进行操作