在Angular应用程序中对组件应用CSS样式的不同方法

迪鲁宾
227 阅读3分钟

Angular组件的样式。在本教程中，通过实例学习向Angular组件添加样式的不同方法。

Angular组件中的样式是使用CSS编程语言使用户体验和UI变得更好。

样式有多种方式:

  • 样式
  • 样式Urls
  • 模板中的内联样式
  • 导入CSS

Angular 13 TailwindCSS示例

  • 第1步 创建Angular应用程序
  • 第2步 使用npm将TailwindCSS依赖性添加到Angular中
  • 第3步 创建tailwind配置
  • 第4步 在全局范围内添加tailwind的CSS样式
  • 第5步 Angular组件要使用tailwind组件。

使用以下命令检查Angular CLI是否已经安装。

ng --version

如果出现 "找不到ng命令 "的错误，你需要安装ng命令，这是一个Angular CLI，用于创建一个具有原型文件夹结构的Angular应用程序。

使用下面的命令安装Angular CLI

npm install -g @angular/cli

它在全局范围内安装了angular CLI，ng命令现在可以工作了。

使用下面的命令来检查angular CLI是否安装正确。

B:\blog\nodejsless>ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.0.3
Node: 14.17.0
Package Manager: npm 7.11.1
OS: win32 x64

Angular: undefined
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1300.3
@angular-devkit/core         13.0.3
@angular-devkit/schematics   13.0.3
@angular/cli                 13.0.3
@schematics/angular          13.0.3

下一步是创建一个angular应用程序

ng new angular-tailwindcss-app

用默认设置创建一个应用程序，并创建一个具有所需依赖性的应用程序蓝图。

一旦应用程序创建完毕，请运行该应用程序

npm run start 
(or)
ng serve

它可以运行angular应用程序，并可在http://localhost:4200。

使用npm将TailwindCSS添加到angular中

我们有多种方法可以集成到angulars中，如tailwind CLI和postcss方法。

tailwindcss 是Tailwind CSS框架的一个npm库封装器。

首先，将tailwindcss作为devDependencies(-D)安装到angular应用程序中 接下来还要安装postcss

npm install -D tailwindcss postcss@latest autoprefixer@latest

它安装并添加tailwindcss作为package.json中的devDependencies部分。

{
  "devDependencies": {
    "tailwindcss": "^3.0.1",
    "autoprefixer": "^10.4.0",
    "postcss": "^8.4.5"
  }
}

创建tailwind配置

下一步是创建一个tailwind配置。

你可以手动或使用tailwind CLI工具创建一个tailwind.config.js文件。

在应用程序根目录下，运行下面的命令来创建tailwind.config.js

A:\angular-tailwindcss-app>npx tailwindcss init

Created Tailwind CSS config file: tailwind.config.js

它创建的tailwind.config.js文件具有以下内容

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

在全局范围内添加tailwind的CSS样式

你必须将tailwindbase,components, 和实用组件纳入应用程序样式文件。

如果你的应用程序正在使用CSS，你必须在style.css中包含以下CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

如果应用程序使用sass，你必须导入tailwind CSS组件

styles.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Angular组件要使用tailwind组件。

在angular app.component.html中，你可以使用tailwind组件并在app.component.scss中应用样式。

在这个组件中，要在angular组件中添加一个带有样式的按钮。

接下来在app.component.html中添加按钮代码。

<h1 class="text-3xl font-bold underline">
  Simple Tailwindo CSS application
</h1>
<button class="btn btn-blue">
  Submit
</button>

在app.component.scss中，请添加按钮样式。

.btn-blue {
    @apply bg-red-500 text-white;
    :hover {
        @apply bg-red-700;
      }
  }
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }

这显示了页面上的tailwind CSS样式按钮。

总结

一步一步的教程解释了关于

  • 安装Angular 13 cli
  • 创建一个新的angular应用程序
  • 将tailwindcss集成到angular应用程序中
  • 配置基础CSS/scss样式
  • 创建一个Angular组件
  • 尾风CSS按钮实例
avatar
文章
阅读
粉丝