使用 webpack 和 SCSS 在 Angular2 项目中集成物化

Question

正如标题中所述，我正在尝试将 Materialize 集成到我的 Angular 2 项目中。

项目是使用“AngularCli”生成的

我使用“Webpack”和“Scss”

我发现的教程都是不同的，我不明白如何为 scss 使用：

- Materialize website tuto

- Npm website

我的 angular-cli json：

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", “项目”： { “名称”：“事故链网络角度”， “弹出”：真 }, “应用”： [ { “根”：“src”， "outDir": "dist", “资产”：[ “资产”， “favicon.ico” ], “索引”：“索引.html”， “main”：“main.ts”， “polyfills”：“polyfills.ts”， “测试”：“测试.ts”， "tsconfig": "tsconfig.app.json", "testTsconfig": "tsconfig.spec.json", “前缀”：“应用程序”， “风格”：[ “资产/scss/main.scss” ], “脚本”：[]， "environmentSource": "environments/environment.ts", “环境”：{ “开发”：“环境/环境.ts”， "preprod": "环境/environment.preprod.ts", “产品”：“环境/environment.prod.ts” } } ], “e2e”：{ “量角器”：{ “配置”：“./protractor.conf.js” } }, “棉绒”：[ { “项目”：“src/tsconfig.app.json” }, { “项目”：“src/tsconfig.spec.json” }, { “项目”：“e2e/tsconfig.e2e.json” } ], “测试”： { “业力”：{ “配置”：“./karma.conf.js” } }, “默认值”：{ "styleExt": "scss", “零件”： { } } }

我的项目在资产中添加了物化文件：

Answer 1

有很多方法可以使用 MaterializeCSS 框架。

安装前需要注意的几件事

• 它不是一个纯 CSS 的框架，虽然它有 CSS 名称。我们也可以使用它的 SCSS
• 它不是为 Angular 构建的
• 它也是一个基于jquery的组件框架。虽然我们不应该在 Angular 中使用 jquery（不建议），但我们仍然导入。

您可以使用任何以下方法：

• CDN
• 资产
• 包含在 Angular (NPM) 中

每个都有自己的优点和缺点。

CDN

只需将此添加到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>

资产

将其作为资产添加到您的项目中。这有助于在本地构建和运行时不依赖互联网。

Download jQuery

Download CSS version

• 提取它们
• 将materialize.min.css、jquery-3.2.1.min.js 和materialize.min.js 复制到您的资产文件夹中

• 将它们添加到 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>
  

包含在角度（NPM）中

在这种方法中，我们直接将文件包含到我们的角度构建中。为简单起见，我假设 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 的集成：

以上所有安装方法都提供了物化的完整功能，无需进一步安装任何东西即可在 Angular 中工作。 举个例子，只需在角度组件的 HTML 部分中使用适当的 HTML 结构，就可以了。

在某些情况下，您可能需要修改 javascript，为此我们需要使用 jQuery。取而代之的是，我们可以在angular2-materialize 使用角度包装器开发人员。我使用 angular 和 materialize 开发了一个功能齐全的网站，但从未觉得有必要。

如果你仍然相信你需要它。您可以按如下方式安装：

• 使用上述任何一种方式安装物化

• 安装 angular2-materialize

  npm install angular2-materilize --save 
  

  添加角度app.module.ts

  import { MaterializeModule } from "angular2-materialize";
  
  @NgModule({
    imports: [
      //...
      MaterializeModule,
    ],
    //...
  })
  

关注angular2-materialize主页提供的其他示例

Answer 2

如果您使用的是 Angular CLI（我假设您的意思是说它使用 Webpack 和 SCSS），为什么不将您的 scss 目录移出 src/assets/ 目录并将其放入src/ 文件夹，所以您的位置是 src/scss/。资产通常是您的应用程序的非编译/处理资源，而不是您的 SCSS 的适当位置。

那你就可以改了

   "styles": [
        "assets/scss/main.scss"
   ],

到

   "styles": [
        "scss/main.scss"
   ],

当您运行 cli（ng serve 或 ng build 时，您的 SCSS 应该被构建并随您的应用一起提供。

我假设您正在导入main.scss 中scss/ 目录中的其他SCSS 文件。否则，您可以将它们添加到angular-cli.json 中的styles 数组中