We are working on a React application (using Create React App without ejecting it) and we decided to use Ant as our base component library.
Now that we are near the end of the project, we discover that the application will be integrated into a corporate portal (WebSphere) as a "portlet", so we inherit all the CSS files from the main page.
Both frameworks seem to have their own reset styles, but they use different values.
So far, I have not been able to find a LESS variable in Ant that can be used for prefix all Ant's CSS rules.
Has anyone ever tried to make them live together?
We don't own the parent development, we can only make change on the React part, so only things related to Ant.
We finally go with a specific CSS patch file, and we add rules when needed.
Not really perfect, but none of the suggested path did the job we expected.
Here you can see some of the default antd variables.
One of them is #ant-prefix: ant;. I think you can change it and apply different styles.
That is a tough one, and at the end of development no less!
As #froston mentions, and which you seem to have tried the #ant-prefix: ant; in addition to this you will need to se prefixCls as a prop on every component instance you create, which will definitely be an exercise in self-flagellation.
Even if you set a global CONSTANT and import and use this with your components, you still have to thread it through to all the places, and will need to be appended with the component name.
By way of example, the defaultProps for an anchor is prefixCls: 'ant-anchor'.
Hope this helps and good luck!
Related
I'm new to Vue and I hope someone can help. I have an app that uses Vuetify (2.2.23), and when I render it locally for development, the HTML contains:
So, v-main is a class, and it's being located in my CSS for styling. However, in another installation from the same files (I've checked the versions of everything too), I get:
So, v-main is now an element, so the CSS is not being applied.
I realise that I can duplicate my styling so that they look the same to the user, but I'd like to understand what to look for in the setup of the projects that would make this happen in the first place?
The versions I'm using are:
Vue 2.6.11
Vuetify 2.2.23
Thanks in advance!
Why is it the thing you've checked the most is the thing that's the problem? This was a version problem after all. I used the ^ minimum requirement, and the two servers ended up using different versions. Bumping both to a minimum of Vuetify 2.3.9 solved it.
Posting this answer in case it helps someone else.
I have two Vue projects, one is an app that is injected in an older website via script-tag and a second project, that is a form, that uses own logic and vuetify components. The later should be used in other projects also and gets props from where it is used. Therefore it should be compiled as a library.
If i compile it as app i can transfer data via a global JS variable, but i would like to use the components like any other library. (Just import it and put it in the <template> like so: <MyComponent ..props../>)
If i compile it as a library i got all sorts of vuetify not correctly initialized. After i cleared them my HTML looked excactly like my code (eg:<v-app>...</v-app>) without any errors.
The 'serve' from the standard installation worked without a problem in the component project.
The component project is created with vue create project and modified according to https://cli.vuejs.org/guide/build-targets.html#library
I already searched online and got only so far, my question on the vue discord was left unanswered, so my questions are:
1. Is this even possible to do?
2. If it is, could you please point me in a direction, or give a summary of what i have to do?
3. If not, is there another way of achieving this, except for copying the raw code into each project?
Short answer, yes. Is it recommended, no.
The best way to do this is to export your form component as a library so that it can be imported into other projects but exclude any dependencies like Vuetify, which should be imported separately. This avoids versioning errors.
The Vue docs on packaging for npm are useful as is this article
I'm a vue.js beginner and I've been trying to integrate the Quill editor into Vue modules. At first, I tried with the vue-quill plugin but documentation is very poor and I couldn't understand how to use it. Very frustrating.
Now I don't know if I'm better off trying to create my own plugin or if I give the existing plugin a second try and maybe try to enhance it.
What I want is someone to please provide some sample working code to get this going.
Upon inspecting the vue-quill package.json file I noticed it depended on an old version of quill :
"dependencies": {
"quill": "^0.20.1",
...
}
Since I was getting fragment errors from that build I decided to take the original code to suit my needs. At this point, you can copy this modified component and use something like vue-cli to use it.
I can't give you precise steps on vue-cli because my project is based on Laravel, but the idea of storing different .vue files into a components folder should be similar.
Finally, I simply use the component in one of my views :
<quill :content.sync="content"></quill>
Note : I am still fiddling around the component that I uploaded on gist, so take it as a starting point. The code is fairly simple.
I recently started to create custom theme for ExtJS 5 by Sencha.
Following http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html I managed to create ThemeDemoApp, inherit ext-theme-neptune, change $base-color to green and refresh/rebuild ThemeDemoApp with my-custom-theme. All ok.
My problem is, ThemeDemoApp is quite poor for testing a custom theme. A panel, tab, button and a modal window. That's it?
After bit of googling I bumped into http://dev.sencha.com/ext/5.0.0/examples/themes/index.html. (Why isn't this mentioned in the guide?!) Heading says: View and test every Ext component against bundled Ext Themes, or your own custom themes.
My question is: How? How do I test my own custom theme against this example? Do I have to dig into the source (themes.js) and build such page/application myself?
The examples - including the Theme tester - is included in the ExtJS download.
You can modify the list of themes available by editing the shared/options-toolbar.js file.
To get it to find your theme, you'll either need to name it similar to the others (ext-theme-name), or modify themes.js accordingly.
Or you could just hack the theme.js file to hardcode your theme.
(Ext JS 4 used to create an example page for themes automatically - it doesn't seem to do that now, though)
According to advice at How do I include a JavaScript file in another JavaScript file? I decided to load both options-toolbar.js and themes.js (with just minor modification - commenting out Ext.onReady(...) function in themes.js) and I used functions getBasicPanel(), getCollapsedPanel(), etc. in my own application to create the same testing page (absolute-layout container that fits the page).
Anyhow, I guess Robert's answer is the correct one - there is no prearranged, ready-to-use functionality from Sencha :-(
I'm using the twitter-bootstrap-rails gem for styles in my app.
At the moment, I'm writing all my style ruls inside bootstrap_and_overrides.css.less, and this turns messy and redundant as the application grows.
I'd like to split the less code to smaller files that will be required on a per page basis, but still be able to use the bootstrap colors and mixins. I found that after I split it into another file, I couldn't use these components anymore. I guess I'm probably not including it correctly or in the proper order - thoughts? thanks.
look at https://github.com/twitter/bootstrap/blob/master/less/bootstrap.less
you should be able to use #import "override-forms.less" in your bootstrap_and_overrides.css.less for example.