Hi im trying to change the font of the sweetalert items, quoting from the official docs:
// style.scss
#import '~sweetalert2/src/variables';
$swal2-background: #990000;
#import '~sweetalert2/src/sweetalert2';
I have a scss folder which contains a file called variables.scss which I use to change some vuetify default values, such as the font. But when it comes to sweetalert I cant manage to change it.
Related
Quasar creates two CSS files upon the build:
I want them to have the names like:
-quasar.css
-appQuasar.css
I have been searching a lot and I can't find any documentation to change the CSS. For example the app file on quasar.config.js
Thank you,
In my VUE project with Vuetify, I'm going to use the Bootstrap library.
It turns out that when I import the Bootstrap library, the text font and even the icon, the route has an underline. When I only worked with Vuetify, I didn't have this problem.
import "bootstrap/dist/css/bootstrap.css";
When I comment out the line in the project that imports the library, the underline disappears.
How can I solve this without having to put classes in every route in the project?
"vue": "2.6.14",
"bootstrap": "4.6.1",
"bootstrap-vue": "2.21.2",
"vuetify": "2.6.0",
Fixed my problem.
Bootstrap underlines link routes by default.
So I analyzed the file that is imported into the VUE project, and found several settings that underline links when the mouse pointer lands on them.
The file I analyzed is:
"bootstrap-vue/dist/bootstrap-vue.css";
So, I created a file where to put the CSS configs that I want to change BootstrapVue's default.
//bootstrapGlobal.css
a:not(.btn) {
text-decoration: none;
}
I only needed to change this config, but if I need to change others I'll insert it in this global file.
This tip is for those who need it.
Happy ending!
When I test vue-select in POC project, it works well, see screen shot below:
However, when I use vue-select in my real project, it is disordered, see screen below, did any one have similar issue and how to fix it?
after #import "vue-select/src/scss/vue-select.scss";
Thanks
George
You of course realize that no CSS is applied to the markup, so you need to apply some cuatom CSS.
Or, see the Vue Select docs
how to include their default CSS:
The component itself does not include any CSS. You'll need to include it separately:
import 'vue-select/dist/vue-select.css';
Alternatively, you can import the scss for complete control of the component styles:
#import "vue-select/src/scss/vue-select.scss";
I'm using customize-cra as suggested by antd documentation to be able to customize the theme and it works fine.
I can access less variables from antd theme by importing the index in my less files and it works fine.
I can use the old fashioned css modules to style my components by defining files with .module.css and it works fine.
However, I would like to import and use the antd theme less variables in my css modules and I can't figure out how to make it work. Does anybody know how it can be achieved?
I am able to use the variables if I import antd.less at the top of the whatevercomponent.less file:
#import 'antd/dist/antd.less';
The documentation states that that component styles can be skipped
Skipping Specific Component Styles
Component styles are optional, because they are pulled in from the style library. Therefore, you might want to disable some standard component styles entirely. To disable standard component styles, you can add the component selectors to the $skipComponentStyles list. The following is an example that demonstrates skipping two standard components from the style library:
$skipComponentStyles: (cx-product-carousel, cx-searchbox);
$skipComponentStyles: (cx-product-carousel, cx-searchbox);
Skipping specific component styles might be beneficial if you need to create styles from scratch and do not want to override specific style rules coming from the Spartacus style library.
Where should this be done? I can't get that from the documentation. My first guess should be the global style.scss but for example the following does not work:
#import '~#spartacus/styles/index';
$skipComponentStyles: (header, cx-media, cx-banner, cx-category-navigation);
You're almost right, you just need to swap the 2 lines. The sass variable will be used inside the import of the Spartacus styles, otherwise the variable defaults to an empty var. so, the following will work:
$skipComponentStyles: (header, cx-media, cx-banner, cx-category-navigation);
#import '~#spartacus/styles/index';