In my Angular[v13] project, I used #angular/material. I also want to use tailwindcss.
but #angular/materialcss is a style tag in head. so tailwindcss is not working.
Now i want to extract #angular/material css file. Or is there any way to solve this problem
To solve this issue, be sure to activate important flag on tailwindcss config, in order to automatically mark all css class with !important clause.
So every predefined classes of TailwindCSS will override #angular/material styles.
tailwind.config.js:
module.exports = {
...
important: true,
...
};
Related
I use a tailwind class, which is only add with JS afterwards.
However, when I generate the css from tailwind this CSS class is of course not included. Therefore the question how I can add this class.
Tailwind allows to safelist classes:
https://tailwindcss.com/docs/content-configuration#safelisting-classes
Add the following to your tailwind.config.js:
safelist: [
'class-name-you-need-to-add'
]
The documentation also explains how to use regular expressions to safelist multiple classes.
You will need to configure Tailwind so that it will also scan your JS files that are adding these additional classes. This can be done by modifying tailwind.config.js file and add additional entries/glob patterns to the content array, as per documentation.
Under the hood Tailwind CSS uses regex to simply search for possible classname uses in JS files. This also means that you need to be mindful of how you're adding classes in JS. You cannot use dynamically composited class names, e.g. const className = 'px-' + SOME_NUMBER, because Tailwind CSS cannot guess the class name.
You can customize Tailwind CSS by changing lines under themes section in your tailwind.config.js file. About more details: Tailwind Custom Styles
Angular cli automatically loads css files those are in node_module directory. I am using #swimlane/ngx-dnd and it has css style. But I want to use bootstrap styles for my components. What's standard way for doing this ?
Appreciate any idea and helps.
In your app.component.ts, add:
#Componenent({
encapsulation:ViewEncapsulation.None,
styleUrls:[''], // Add your bootstrap css files
templateUrl: ....
})
If you want to override a package's styles, you can just provide overrides in your own stylesheet or component stylesheet with the same or more specific style definition. Your definition will need to match their style, but must be loaded after their style and/or be more specific so that your style applies correctly.
If you want to exclude their style sheets you will need to use some sort of plugin for webpack to Ignore the css files in the package directory.
I'd recommend the first approach.
If the package you are using creates dynamic markup along with the styling, you may need to change your component encapsulation so that the component you are using can successfully apply your styles to the generated dom elements.
Is there any way available as part of Bootstrap4 scss based build to add prefix to each bootstrap class in css and js to avoid name collisions.
I have used https://github.com/faucamp/bootstrap_namespace_prefixer
But this only supports bootstrap3 based css and js files.
Assuming you make use of SCSS you can prefix the whole BS4 library like:
.myprefix {
#import '~bootstrap.scss';
}
Prefixing the javascript is a little harder. I have not tried this but it looks like you can specify the CONST variables in each js file to match your prefix:
https://github.com/twbs/bootstrap/blob/v4.5.0/js/src/button.js#L23-L25
After that create your own bootstrap index.js, define all variables there and import the classes you need. Or, create a plugin in your (webpack?) buildscript to dynamically replace all classes on build.
You would need to modify the bootstrap code directly, an example of how this could be achieved elegantly in less:
.prefixname {
&-row {
...
}
}
credit for #raygerrard in this question Add prefixes to CSS class names using LESS or SASS
I'm using react day picker in react webpack. I dont want to use css file. So, how could i use a less a file instead of css file. I'm adding hash tag to the class names using webpack.
I don't think this is related to react-day-picker. To use Less instead of CSS you need to use the less-loader in your webpack config: https://github.com/webpack-contrib/less-loader
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.