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';
Related
I want to use both the vuetify.min.css folder and bootstratp.min.css folder. Bootstrap is defined on the layout page and I need vuetify.min.css on another page. Is there any way to use both of them together?
There are multiple solutions here:
Prefix one of the libraries like so:
https://github.com/vuetifyjs/vuetify/issues/9454
Only get what you need from the BS4 library (using SCSS) like so:
#import "~bootstrap/scss/buttons.scss";
Switch to BS3 for your button styling and create a custom package.
In my opinion the best solution is the second, get it working in your setup and build the files you need. More info on Theming BS4 here.
I would like to know how I can add an old Three Js code to a page component in Vue Js, like just plain javascript grabed on html script tag, without using methods or computed objects from Vue
I'm using node 10.14, Vue-cli 3 and Vue scaffold
If I understand your question correctly, one way you could probably do this is to have the JavaScript extracted out into a helper file like /lib/3JS.js and then make sure to export it.
Then you could import it into your Vue file and use it there.
I have some method to generate random hexademical color. It will be used in very few (3 or 5) parts of the project. So I want to separate it from main code into some kind of Helper or smth else, and include it when needed (not globally).
I have 2 working ways to do this:
Using mixins. What I don't like is that when you read the code, you can't separate your own methods from methods of mixin.
Using plugins. What I don't like with that is that you have to write import Vue from 'vue' + Vue.use(MyPlugin) every time in all files where you want to use it. After that, you can call it like this.$ColorHelper.getRandomHEX().
So, the question is about aesthetics visualization.
What is the best practices to do such things?
PS: project was created from template with webpack.
Our team decide use function import from files-helpers
For example:
import { getRandomColor, getBackgroundColor } from 'Global/helpers/colorHelper';
// .....
let color = getRandomColor();
What good:
Don't need use excess import + use as in plugins
Method visually stands out, what it not from this
What bad:
Cant see visually what the helper have method. But possible can fixed with aliases. We dont think yet
Vue plugins are global, you only have to call the Vue.use method once. Then they should work wherever you use that particular Vue instance.
In a default project setup you normally don't have multiple Vue instance so it should work globally.
From the docs:
Plugins usually add global-level functionality to Vue.
And:
Use plugins by calling the Vue.use() global method:
Vue.use(MyPlugin)
https://v2.vuejs.org/v2/guide/plugins.html
What is the correct way of importing javascript modules into vue-components?
I currently have a vue-component component.js:
Vue.component('component', {
name: 'component',
props: ['pdf'],
template: ` ...
I want to take a pdf-url as a prop and use pdf.js within the component, but I'm having trouble finding the right way/standard way to import pdf.js into my project.
Worth noting is that I'm not using vue-cli, or any other kind of bundler like Webpack, so my project structure might be a bit different from standard project structures. I access my components from a main.html file in which I have imported both vue and the components in script-tags in the head of the html. Would I simply import pdf.js in the same manner (head in the main.html file), or is there a "vue"-way of doing it?
If you are not using webpack or any other packager, then I will recommend you to stick to the old fashion way, just use pdf.js as script in your html and make use of the API as it is in the official documentation, such as: pdf.getPage(1).then(...)
Hope it helps.
Cheers
I'm new to Vue (and the concept of single file components) and not sure how the CSS is compiled when my app is generated.
I have a pattern library where all the SCSS is compiled for my project so I want to pull this into my components. I know I can load in the mixins and variables globally, then I intend on handpicking other blocks of sass if they need to be used to style that component.
What I'm worried about is:
if I keep using the same style definitions in multiple components, will these be duplicated in the compiled css?
If so. how can that be avoided? Eg:
I import the 'headings.scss' in 10 components. Will there be 10 instances of that 'headings.scss' file in the compiled CSS?
I hope that makes sense! Just need some more clarity here.
Yup there will be duplication. But if you are using vuejs webpack template the production build's css is processed by cssnano which will discard duplicated css
note; only exact duplicates will be discarded.