[英]Integrate materialize in a Angular2 project with webpack and SCSS
As explain in the title I'm trying to integrate Materialize in my Angular 2 project. 正如标题中的解释,我正在尝试将Materialise集成到我的Angular 2项目中。
The project was generated with " AngularCli " 该项目由“ AngularCli ”生成
and Im using " Webpack " and " Scss " 我正在使用“ Webpack ”和“ Scss ”
The tuto I found are all differents I don't understand how to do it for a scss use : 我找到的tuto都是不同的我不明白如何使用scss :
- Materialize website tuto - 物化网站tuto
My angular-cli json : 我的角度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": { } } }
My project with materialize files added in assets : 我的项目在资产中添加了物化文件:
There are many ways to use MaterializeCSS framework. 有许多方法可以使用MaterialiseCSS框架。
Few things to keep in mind before going to installation 在安装之前要记住几件事
You can use any of the following methods: 您可以使用以下任何方法:
Each has its own advantages and disadvantages. 每个都有自己的优点和缺点。
Just add this to index.html
and you are good to go . 只需将其添加到
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>
Add it as an asset in your project. 将其添加为项目中的资产。 This helps in not depending on internet when building and running locally.
这有助于在本地构建和运行时不依赖于Internet。
materialize.min.css
, jquery-3.2.1.min.js
and materialize.min.js
in your assets folder materialize.min.css
, jquery-3.2.1.min.js
和materialize.min.js
add them to index.html 将它们添加到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>
In this method we directly include the files to our angular build. 在这个方法中,我们直接将文件包含在角度构建中。 I am assuming the angular project is built with
@angular/cli
for simplicity. 我假设角度项目是使用
@angular/cli
构建的,以简化。
Do 做
npm install materialize-css --save
npm install jquery --save
npm install url-loader --save
Add the following to .angular-cli.json
: 将以下内容添加到
.angular-cli.json
:
"styles": [
"styles.scss"
]
"scripts":[
"../node_modules/jquery/dist/jquery.js",
"../node_modules/materialize-css/dist/js/materialize.js"
]
Inside styles.scss
, add this : 在
styles.scss
里面,添加:
$roboto-font-path: "~materialize-css/dist/fonts/roboto/";
@import "~materialize-css/sass/materialize";
The above all installation methods provide full functionality with materialize and no need to further install anything to work in angular . 上述所有安装方法都提供了实现的全部功能, 无需进一步安装任何角度工作 。 Take any example and just use the appropriate HTML structure inside the HTML part of angular components and you are good to go.
举个例子,只需在角度组件的HTML部分中使用适当的HTML结构,就可以了。
In some instances you might need to tinker with javascript and for that we need to use jQuery. 在某些情况下,您可能需要修改javascript,为此我们需要使用jQuery。 Instead of that we can use the angular wrapper developer at angular2-materialize .
而不是我们可以在angular2-materialize处使用角度包装开发者。 I developed a full functional site using angular and materialize and never felt a need for that.
我开发了一个使用角度和物化的全功能站点,从来没有感觉到需要。
If you still believe you need it . 如果你仍然相信你需要它。 You can install as follows :
您可以按如下方式安装:
Install angular2-materialize 安装angular2-materialize
npm install angular2-materilize --save
Add in angular app.module.ts
添加角度
app.module.ts
import { MaterializeModule } from "angular2-materialize"; @NgModule({ imports: [ //... MaterializeModule, ], //... })
Follow other examples provided in the home page of angular2-materialize
按照
angular2-materialize
主页中提供的其他示例进行angular2-materialize
If you're using the Angular CLI (which I assume you meant to say that it is using Webpack and SCSS), why not move your the scss
directory out of the src/assets/
directory and put it into just the src/
folder, so your location is src/scss/
. 如果您正在使用Angular CLI(我假设您的意思是说它使用的是Webpack和SCSS),那么为什么不将
scss
目录移出src/assets/
目录并将其放入src/
文件夹中,所以你的位置是src/scss/
。 Assets are typically non-compiled/processed resources for your apps, not the appropriate place for your SCSS. 资产通常是针对您的应用的非编译/处理资源,而不是您的SCSS的适当位置。
Then you can change 然后你可以改变
"styles": [
"assets/scss/main.scss"
],
to 至
"styles": [
"scss/main.scss"
],
And when you run the cli (either ng serve
or ng build
your SCSS should be built and served with your app. 当您运行cli时(无论是
ng serve
还是ng build
您的SCSS都应该构建并与您的应用程序一起提供。
I am making the assumption that youre importing the other SCSS files in the scss/
directory in your main.scss
. 我正在那youre导入其他SCSS文件中的假设
scss/
目录在你main.scss
。 Otherwise you can add them to the styles
array in the angular-cli.json
否则,您可以将它们添加到
angular-cli.json
的styles
数组中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.