css - TailwindCSS 在 Angular(延迟加载)子组件中不起作用
问题描述
我一直在努力让 TailwindCSS 与 Angular 一起工作。我遵循了一些教程并查看了 Tailwind 的文档。出于某种原因,在 Angular 9 应用程序的某些地方它正在工作,而在延迟加载的模块中它不是(看起来如此)!
所以我做的第一件事就是遵循并实施这些教程:
https://dev.to/seankerwin/angular-8-tailwind-css-guide-3m45
https://dev.to/beavearony/building-tailwind-css-in-an-angular-cli-project-e04
由于以下原因,我确定我已经正确安装了这些:我的侧边栏(app-sidebar)具有正确的 css 和样式!但是我通过 加载的页面不是。
我将为您提供我的 app-routing.module、默认布局和仪表板组件。在此仪表板上,tailwindCSS 未加载。(有趣的是:如果我添加一个没有类的 H1 元素,我在仪表板页面上什么也看不到这个元素!)其他包含某种 tailwindCSS 类的元素没有。此外,如果我将仪表板组件的内容拖放到此仪表板组件之外,我会看到我的元素,尽管没有任何样式。(我用 Chrome DevTools 做这个)
应用程序路由.module.ts
{
path: 'login',
loadChildren: () => import('./modules/login/login.module').then(m => m.LoginModule)
},
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full',
},
{
path: '',
component: DefaultLayoutComponent,
children:[
{
path: 'dashboard',
loadChildren: () => import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule)
}
]
},
{ path: '**', redirectTo: '' }
];
默认布局.component.html
<div class="h-screen flex overflow-hidden bg-gray-100">
<app-sidebar></app-sidebar>
<div id="content">
<router-outlet></router-outlet>
</div>
</div>
仪表板.component.html
<h1>Dashboard</h1>
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<div class="md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3">
<button class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:bg-gray-200 transition ease-in-out duration-150" aria-label="Open sidebar">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<main class="flex-1 relative z-0 overflow-y-auto pt-2 pb-6 focus:outline-none md:py-6" tabindex="0">
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<h1 class="text-2xl font-semibold text-gray-900">Dashboard</h1>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<!-- Replace with your content -->
<div class="py-4">
<div class="border-4 border-dashed border-gray-200 rounded-lg h-96"></div>
</div>
<!-- /End replace -->
</div>
</main>
</div>
以下我尝试过但没有成功:
ViewEncapsulation(如何让 Angular 的 <router-outlet> 与 CSS Grid 一起工作)
在每个页面上添加一个指向带有 tailwindCSS 的 CDN 的链接
它可能与延迟加载的模块有关吗?
或者可能有一个双路由器插座?因为这就是我的app.component.html 的样子
<router-outlet></router-outlet>
解决方案
所以我想通了。实际上还有两件事我必须做。首先是设置tailwindcss配置(tailwind.config.js)并在我的webpack.config.js的帮助下将它附加到tailwindcss
module.exports = {
module : {
rules: [
{
test : /\.scss$/,
loader : 'postcss-loader',
options: {
ident : 'postcss',
syntax: 'postcss-scss',
plugins: () => [
require('postcss-import'),
require('tailwindcss')('./tailwind.config.js'),
require('autoprefixer')
]
}
}
]
}
};
我必须做的第二件事是将组件的整个类放到我的 Angular 组件中的主机上。
仪表板.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss'],
host: {
class: "flex flex-col w-0 flex-1 overflow-hidden"
}
})
export class DashboardComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
所以回头看看我的问题并查看dashboard.component.html文件,最高的div被删除了,那个div的类被放在了host中!如上。
我已经关注了我的问题中的第一个链接!
推荐阅读
- json - JSON 对象在 API 调用和前端之间丢失信息
- python - 将特定端口的所有 TCP 流量转发到 Windows 中的另一台服务器
- javascript - 将部分字符串拆分为变量或数组
- reactjs - 根据选择 ReactJS 显示价格
- c++ - 多文件工厂方法
- python - 如何使用 for 循环将一系列数字添加到列表中?
- c# - Google API Oauth2 刷新令牌错误请求 400
- docker - 设置和运行 docker 镜像:基本问题
- silent-installer - 我们可以为每个 exe 创建一个安装响应文件,即 .iss 文件,或者对此有任何限制吗?
- sql - Redshift - SQL - 获批学生的比例