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!
Related
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.
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 am using vue-apexcharts in my vuejs project. I have around 15 pages where I am using charts and I want to change the font family everywhere. How to achieve this generically? Is there any general approach to change the fonts all together?
https://apexcharts.com/docs/options/chart/fontfamily/
This is the example where it's written how to change it in a specific way.
You can set global options just after you've imported and registered vue-apexcharts.
import VueApexCharts from "vue-apexcharts";
Vue.use(VueApexCharts);
window.Apex.chart = { fontFamily: "MuseoModerno, Arial, sans-serif" };
This will then be applied to all charts.
Of course, remember that you'll also need to make sure that the font is globally available in your Vue project by for example importing it.
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';
I have the feeling I'm thinking way too much into this, but I cannot find what I'm looking for in this pattern.
I have a VueJS app with several components and it all works. I'm using style-resources-loader to pull in my global variables and mixins and such into each component. This works as intended.
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
path.resolve(__dirname, './src/styles/variables.scss'),
path.resolve(__dirname, './src/styles/text-mixins.scss'),
path.resolve(__dirname, './src/styles/interactive-mixins.scss'),
],
}
},
}
I also have an app-level style sheet. Resets, general layouts, etc. These are not things I want pulled into the SCSS processing of each component - just something I want output in the final CSS for the application.
Everything I find when looking for "how to add SCSS file to Vue" is all about the resource loader for the component processing. I cannot include the global styles in this way and then rely on de-duping to remove the extraneous ones - the imported global styles are being scoped by the built-in component scoping, which is causing bloat and is just generally a bad pattern.
I also don't want a separate Webpack build and CSS file as the end product if I can avoid it.
I can put this inside say the root level App style block, but that's not a great place to work with page-level CSS. It would be ideal to have this a/a set of SCSS files separate from components, but part of the Vue App's SCSS compiling.
Update
Had a big block of stuff here, not sure how it got in that state but that is not the case now and I cannot recreate it.
Throw them in your entrypoint.
Literally include the scss within the start. Like this in your app.ts or app.js :
import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css' <-- like this
Vue.use(Buefy)
If your webpack is setup correctly, e.g. Vue cli, then it doesn't care how the scss is found. It will just inject it globally. Vue components are also global unless you specify scoped scss.
Example from https://buefy.org/documentation/start/