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
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
I have a global CSS file that contains all generic CSS.
I want to be able to extend all the classes present in this global CSS file in any of my SCSS files.
Right now it throws an error .xyz class does not exist and build fails. I tried importing this file but still build fails.
Adding !options next to class is one way for the build to pass but is there any other better way?
Bit more context for Vue users. I use VueCli3. I use <style lang="scss"> for writing SCSS and want to use extend here. Vue documentation suggesting adding prependData for adding variables. I imported the global CSS in a SCSS file and imported that file in the prependData but Vue build still fails.
It sounds like you want to globally include a CSS file with content that the SCSS blocks in each component can read. (Variables, style definitions, etc).
#extend works like a variable, meaning SCSS needs the definition style to be available as part of its compilation. So that means getting "SCSS Global Variables" working should solve your Extend problem too.
In that case, you need to tweak how Webpack deals with your components. You can do it manually as described here. Or my preference is to use a Vue Cli plugin called vue-cli-plugin-sass-resources-loader. Make sure that your component <style> section contains lang="SCSS" though I assume you're already doing that.
Using #import CSS file into SCSS file not possible to #extend any class.
But you can follow below steps for extends class from your pure css code.
Convert .css file into .scss.
import that global.scss file into another .scss file.
Then after you can use #extend for extend class in new file.
If your file have more then 1k line of code then it will get trouble for extend class.
I'm creating a HTML/CSS page which is using Bootstrap. In fact I have to customize some parts. Because of several reasons some class names do not match the original from Bootstrap.
So, I have two files. bootstrap.min.css and main.less (=>main.min.css).
I'm wondering if it is possible to match classes in main.less to bootstrap.min.css.
So, I have a class .orderby (in main) which should have the same settings then .form-control (bootstrap).
Something like this:
.orderby { #.form-control }
But I have no clue how to refer to another css file.
Would appreciate if somebody can point me to the right feature.
Thank you!
You can do this with LESS's extend "all". The generic form is :extend(<indentifier> all) {}. In your case, you'd do
.orderby {
&:extend(.form-control all) {}
<your additional styles>
}
Additionally, if you don't need to use all of Bootstrap, you can import just the bits you need with LESS's reference:
#import (reference) path/to/bootstrap
Combine that with the above extend code, and you'll pull in just Bootstrap's .form-control.
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.