Open tschaffter opened 3 days ago
To configure styles and themes for an Angular app in a monorepo managed with Nx, enabling reuse across multiple projects, you can follow these steps:
First, create a shared library within the monorepo that will contain the styles and themes. This library can then be imported by any Angular project in the monorepo.
nx generate @nrwl/angular:library shared-styles --style=scss
This will generate a library named shared-styles
.
In the shared-styles
library, add your global styles and themes. For example, you can create an SCSS file for your themes:
libs/shared-styles/src/lib/themes.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-family: 'Roboto', sans-serif;
@mixin theme {
body {
font-family: $font-family;
background-color: $primary-color;
color: $secondary-color;
}
}
Ensure that the styles and themes are exported so that other projects can import them. Modify the index.ts
file of the shared-styles
library to include your SCSS file:
libs/shared-styles/src/index.ts
export * from './lib/themes.scss';
In your Angular projects, import the shared styles and themes. Open the styles.scss
file of the Angular project and include the shared styles:
apps/your-angular-app/src/styles.scss
@use 'libs/shared-styles/src/lib/themes.scss' as *;
@include theme;
Ensure that the Angular project is aware of the shared library. Modify the angular.json
file if necessary to include the shared-styles
library in the build process.
{
"projects": {
"your-angular-app": {
"architect": {
"build": {
"options": {
"styles": [
"apps/your-angular-app/src/styles.scss",
"libs/shared-styles/src/lib/themes.scss"
]
}
}
}
}
}
}
To use the shared styles in Angular components, you can import the SCSS files directly into the component styles.
apps/your-angular-app/src/app/app.component.scss
@use 'libs/shared-styles/src/lib/themes.scss' as *;
@include theme;
By following these steps, you will have a centralized shared styles and themes library that can be reused across multiple projects in your Nx monorepo. This approach helps maintain consistency and reduces duplication of styles and themes across projects.
To integrate Tailwind CSS into your Angular app within an Nx monorepo and share styles and themes across multiple projects, follow these updated steps:
First, install Tailwind CSS and its dependencies in your workspace:
npm install -D tailwindcss postcss autoprefixer
Initialize Tailwind CSS configuration:
npx tailwindcss init
Create a shared library to contain your Tailwind CSS configuration and custom styles.
nx generate @nrwl/angular:library shared-styles
Create a tailwind.config.js
file in your shared-styles
library.
libs/shared-styles/tailwind.config.js
module.exports = {
content: [
'./src/**/*.{html,ts}',
'../../apps/**/src/**/*.{html,ts}', // Ensure it includes all Angular apps in your monorepo
],
theme: {
extend: {
colors: {
primary: '#3498db',
secondary: '#2ecc71',
},
fontFamily: {
sans: ['Roboto', 'sans-serif'],
},
},
},
plugins: [],
};
Create a global CSS file in the shared-styles
library.
libs/shared-styles/src/lib/global-styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Custom styles can be added here */
Create a postcss.config.js
file in the shared-styles
library.
libs/shared-styles/postcss.config.js
module.exports = {
plugins: {
tailwindcss: { config: './tailwind.config.js' },
autoprefixer: {},
},
};
In your Angular projects, import the shared styles. Open the styles.scss
(or styles.css
) file of your Angular project and include the shared styles.
apps/your-angular-app/src/styles.css
@import 'libs/shared-styles/src/lib/global-styles.css';
Ensure that the Angular project is configured to use PostCSS. Modify the angular.json
file to include the PostCSS configuration.
{
"projects": {
"your-angular-app": {
"architect": {
"build": {
"options": {
"styles": [
"apps/your-angular-app/src/styles.css"
],
"stylePreprocessorOptions": {
"includePaths": [
"libs/shared-styles/src/lib"
]
},
"postcssOptions": {
"config": "libs/shared-styles/postcss.config.js"
}
}
}
}
}
}
}
You can now use Tailwind CSS classes in your Angular components.
apps/your-angular-app/src/app/app.component.html
<div class="bg-primary text-secondary font-sans">
Hello, Tailwind CSS!
</div>
Ensure that the shared library is correctly set up in the Nx workspace. Check the workspace.json
or nx.json
if any additional configuration is needed.
By following these steps, you will have Tailwind CSS integrated into your Angular app within an Nx monorepo, with a shared styles library that can be reused across multiple projects. This approach ensures consistency and maintainability for styles and themes across your projects.
What product(s) is this feature for?
Agora, MODEL-AD, OpenChallenges
Description
The existing web apps in the monorepo use Angular v17, while Angular v18 has since been released. The new version includes improvements to SSR and support for esbuild as a replacement for webpack, promising faster build tasks.
Here are some observations made when initially generating the MODEL-AD app with Angular v18:
To explore transitioning to Angular v18, we could create an Angular v18 app and investigate the best way to style it. Ideally, this approach would allow styles and themes to be reused across projects.
cc @hallieswan @sagely1 @rrchai @vpchung
Anything else?
No response
Code of Conduct