Most of the tutorials and articles are using approach to import tailwind dependencies in styles.scss
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
And then write custom styles with #apply function in custom-components.css or some separate file in global level.
But what if I want to use #apply function with tailwind in my component scoped styles? Is that possible?
Currently either my f.x. custom-component.css is polluted with different component styles, or component html is polluted with many classes.
BR
I used #ngneat/tailwind to add tailwindcss to my angular project and I could use #apply in my scss file of component.
However, it seems like nesting is not working all the time for me and, most important, dark variants is not working as well (here is the explanation).
Tailwind's documentation about components is to avoid using custom classes and just keep tailwind classes in the html if it's complex and only used in one component.
Related
We've two options to keep styles in an Angular 9 app; global styles in styles.css or individual component level styles in the component css file.
If looked at the project from performance perspective;
what should be the preferred way?
Should we keep all styles in a single global style.css file or keep each component related styles in their component.css file?
To answer this question we have to refer to the Angular official doc.
By using Using component styles you will have a better modular design.
Angular can bundle component styles with components, enabling a more
modular design than regular stylesheets.
But, if there are some styles that are common between more than one component it's better to have a shared css and e.g. if you use pre-processor such as .SCSS, LESS, SASS, ..., you can have some _var.scss to define general styles such as base color, fonts, ... and then #import in other component styles or just register global style files in the styles section which, by default, is pre-configured with the global styles.css file.
So, using component styles provide scoping restriction and View encapsulation for your app. This scoping restriction is a styling modularity feature:
You can use the CSS class names and selectors that make the most sense
in the context of each component.
Class names and selectors are local to the component and don't collide with classes and selectors used elsewhere in the application.
Changes to styles elsewhere in the
application don't affect the component's styles.
You can co-locate the
CSS code of each component with the Typescript and HTML code of the
component, which leads to a neat and tidy project structure.
You can
change or remove component CSS code without searching through the
whole application to find where else the code is used.
There are several ways to add Global (Application wide styles) styles to the Angular application. The styles can be added inline, imported in index.html or added via angular-cli.json. The angular allow us to add the component specific styles in individual components, which will override the global styles.
I don't think there is much (if any at all) significant difference in performance. The global or component style distinction is all about the scope of those styles and maintainability of your codebase. Generally its good idea to keep everything in components as they are scoped to themselves and will not accidentally override other same styles from anywhere else. And global styles should stay mostly to theming, utility, helpers etc.
Besides you have an option to make component style global as well, if for some reason you need to do that.
step to define/preferable way for global style
Create _base.scss file in the css folder (first create css folder).
import other helping scss file in _base.scss file
add the entry of _base scss file in style.scss file (style.scss available when we create the folder).
Problem
I want to integrate angular material scss, but scope and isolate it to only apply its styles to my application. I need this, because my angular application will be embedded in a big monolith. Therefore, we need to prefix our applications scss and have it scoped as it could style other parts of the application. The problem is, that if somebody uses the same class names like angular material does, the styles will win by specificity and this is uncontrollable and will lead to bugs.
Our Idea
The styles should be isolated/scoped to just be applied to our <my-app></my-app> tag by prefixing all selectors automatically.
Generated styles should look like this:
my-app .mat-button {}
Current Attempt
Our current attempt is to include it where we need it. It looks like the following:
styles.scss
#import "~#angular/material/theming";
my-app {
#include mat-core();
#import "~#angular/material/prebuilt-themes/deeppurple-amber";
}
The Problem with this solution is, that the scoping is applied to some classes, but not to all.
Demo/Showcase
I created a demo on stackblitz as showcase.
You can see the problem in the in the following screenshot:
Is there another option to have angular material styles isolated/scoped?
The styles applied are still within the project.. If you want some app-wide styles that should not be in the top-level styles.scss, put them in app.component.scss and make sure that all other components are children of app.component.ts. Angular scopes (s)css files to its related component by default.
I have in styles in angular-cli.json "../node_modules/bootstrap/dist/css/bootstrap.min.css". Why when I remove these lines and I add to every css in every component #import "{correct path to every directory/node_modules/bootstrap/dist/css/bootstrap.min.css}"it doesn't work as before?
The styles from styles.scss or included in the angular-cli.json work globally on the page, whereas when imported - they work only for the specific component.
That being said, it's probably not working for you, because bootstrap adds some styles to i.e. <html> or <body> elements and your components cannot style these.
Most likely your AppComponent's locator (app-root or so) is placed inside <body>. It cannot style parents.
Bootstrap should be imported once in your global stylesheet, then bootstrap classes/components may be used in your entire application.
Styles imported in component decorators are encapsulated (by default) and should be used inside given component only. When you try to import Bootstrap to all your components, generated stylesheet is repeated many times.
I am using the latest Angular(4) with Angular CLI. I followed the advice found on SO for setting up global scss that is available to components.
Angular-CLI global scss vairables
My structure looks like this
/
styles.scss
/styles
variables.scss
mixins.scss
common.scss
/app
/component1
component1.scss
/component2
component2.scss
The main styles.scss file has the following code
#import './styles/variables.scss';
#import './styles/mixins.scss';
#import './styles/common.scss';
And in my components, I start each component scss file with the statement of
#import '~styles.scss';
I thought that this was the correct way to bring global variables/mixins/common into my component's scss. However, when I started to have components within components, I began to notice that Webpack was actually creating one block per component in the page, and each one of them had all of the global scss written out in them. So there would be one block for component1, with ALL of the variables,mixins,common stuff at the top, and then another block right below that one for the other component2 in the page, with all that information again.
Besides this being extremely inefficient, it means that the global styles are overwritting themselves (can see that in chrome debug) once for each time they are loaded.
Some direction would be very much appreciated.
The <style> tags are normal angular behaviour. Each components SCSS gets written into a <style> element, so there is nothing wrong with that.
The style.scss is for global styles that do not need encapsulation. It also gets written into a <style> element, if you imported it in your angular.json:
"styles": [
"styles.css"
],
What you are getting wrong is the question you linked (which is still not accepted).
You shouldn't import your already imported styles.scss (apart from variables or mixins) into your components, because this will lead to increasing bundle sizes, as you import the code over and over (which is also the reason for the GitHub issue you mentioned).
You can use the mixins, variables and common.scss simply by including them directly in your components SCSS, just as you need them.
This is basic sass behaviour, you should never import things that result in css several times (sass files imported into component should typically only contain variables, mixins and functions). If you need your import to happen only once, add it to the default styles file.
Look here
I need my Vue components to inherit styling and variables from other "global" imports.
I do not want to import variables and bootstrap in every single component, this seems very redundant and not best practice.
It is basic usage so Vue must have made the functionality. I have already attempted to create a base component, an "app.vue" component if you will, that has its own styling that includes the variables and bootstrap, but my components can still not access it.
Any idea?
You can do this with webpack's sass loader options that name is 'prependData'. This code will be added top of every .vue file that consist of scss style. I know this is ugly but It works. As bootstrap documentation said. You have two choices about this. One of these is adding whole bootstrap files another one is this technique.
You can check here bootstrap documentation.
// webpack.config.js
loader: 'sass-loader',
options: {
prependData: "#import '~/node_modules/bootstrap/scss/_functions.scss'; #import '~/node_modules/bootstrap/scss/_variables.scss'; #import '~/node_modules/bootstrap/scss/_mixins.scss';"
}
I know of no other way than #import the variables file in each component. Much like we have to import/require the npm libs we use in each component.