Hopefully this is a newbie question.
I am working on integrating vuetify into an existing vuejs web SPA application in a few screens. The application uses purpose ui for it's css and styling. After integrating vuetify into the application we see that the site now has the style of vuetify.
How can I ensure that vuetify's styling is only restricted to the specific vuetify controls on the few screens, that those controls are used on?
Update 1:
index.js
if (Meteor.isClient)
{
import 'vuetify/dist/vuetify.min.css';
}
index.html: meteor-bundled-css line below should include the vuetify.min.css in the bundled css file but I don't see the css constructs in the bundled file, though the website is now a material ui\Vuetify website now.
<head>
<link type="text/css" href="/css/purpose.css" rel="stylesheet">
<meteor-bundled-css />
</head>
I was able to workaround this issue by removing Vuetify and adding BootstrapVue in the project, wrt to the BootstrapVue, Bootstrap css files, instead of adding the css files in the index.js file, I added the same to the client folder so it could be bundled\minified by Meteorjs itself.
Related
We have been using Vue, shoe horned into a legacy MVC app for some time. The css classes have recently been moved to a CDN, which is controlled by another team.
In the components, we import the CSS like this:
<style scoped>
#import "https://content.ourcdn.com/cdn-test/assets/css/search.min.css";
</style>
This all works fine, expect we need to change the URL when deploying to Production to the production CDN (Ie. cdn and not cdn-test).
Ideally the base Url would be held in a json file that could be replaced as part of our CI process.
Is any of this possible and am I looking at this from the right way?
remove scoped, this must work..
<style>
#import "https://content.ourcdn.com/cdn-test/assets/css/search.min.css";
</style>
On my vue PWA the css from vue bootstrap and buefy seems to undergo Slow loading of CSS.
I've tried V cloak, but it only hides components ms. after you see a see a glimpse of raw html with no css.
I'm trying to find a way on how to get a loader to show or something that hides the first milliseconds of html blocks or initially fix how the html blocks don't show without any style/don't show at all like on the gif below.
I appreciate any solutions here.
(Can't show image/gif here due to reputation rule)
Click here for gif
The gif shows that the js is loaded before the css. This usually means that the css file is referenced too late in your index.html file. References (usually <link> elements) are loaded in the order that they're listed in html. Check your site in the inspector, and see where your css is listed
<link href="/app.js" rel="preload" as="script />
<link href="/app.css" rel="stylesheet" />
<style type="text/css"> ... </style>
// app.js should come first
This should be done automatically by vue-style-loader, which should be included in vue/cli-service. Are you using the vue cli?
I have a React app created using create-react-app which links to my CSS file as shown below in index.html file:
<link rel="stylesheet" href="../src/site.css"></link>
The site.css is implemented below:
body {
background-color: green;
height:100%;
width:100%;
}
When my app is run it does not apply styles to the body. I can see the css file is being downloaded.
The src directory is not served with create-react-app. You either need to move your CSS file to the public directory or import it from one of your JavaScript files.
Internally everything is bundled using Webpack with loaders that understand stylesheets, so the simplest way to handle this is to remove the link tag from your public/index.html file and instead add the following import to your src/index.js file:
import "./site.css";
Alternatively, if you really need to link to the stylesheet from your html file, you can move it to public/site.css and change your link tag to reference it:
<link rel="stylesheet" href="/site.css">
Kind of a newb question. I'm working with Boostrap to create a mobile responsive portfolio. What do you do if you want to make a change to the default Bootstrap classes? Like if I wanted to take the padding off of the class="container"? The links are only connected to the minified version of css and js. So if I make a change to the regular version .css, there's nothing connecting the change. Do I have to change the .min.css version? Should I be able to repeat a class in my own personal css page?(I've tried unsuccessfully) Thanks, any advice would help.
Two methods that I know of:
1) Make edits to the .min.css file, or
2) Add '!Important' to the your personal css, like so:
.testDiv{
font-color: white !Important
}
This will overwrite any classes that have set a font-color for .testDiv
*note: using !important is not a recommended technique, but it gets the job done
You can override the classes in your own CSS file (make sure you import it into your HTML after the original CSS files from bootstrap). Like,
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="path/to/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="path/to/css/bootstrap-theme.min.css">
<!-- Custom Tweaks to theme (Add your changes to this file) -->
<link rel="stylesheet" href="path/to/css/style.css">
<!-- Latest compiled and minified JavaScript -->
<script src="path/to/js/bootstrap.min.js"></script>
However, if you are going to make lots of modifications like that, I suggest you create your own customized version
I am developing a large-scale RIA application using Ext JS 4. Inside my index.html I've the following definitions:
<link rel="stylesheet" href="ext/resources/css/ext-all.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/GridFilters.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/RangeMenu.css">
<link rel="stylesheet" href="resources/css/default/index.css">
<link rel="stylesheet" href="resources/css/default/profile/user.css">
<link rel="stylesheet" href="resources/css/default/profile/documents.css">
The problem
In provided code only index.css is present, but each view in my application will have its own CSS stylesheet, which will use its own sprites/images (I've added user.css and documents.css in provided code as example). That all will grow into a huge amount of not minified CSS files, which will slow down application loading time significantly.
Also, some styles of Ext JS 'ux' components are not included in ext-all.css (GridFilters.css and RangeMenu.css in provided code).
I can write down a script, which will compress all these CSS files into one file, but ...
The question
Which is the correct way for styling Ext JS 4 applications? Maybe one should create SCSS files and do all styling there, and compile each time with compass compile to create CSS files and do development?
Is there any way to include styles for 'ux' components which comes in standard Ext JS 4 distribution? Some thing like ext-all.css for 'ux components (something like ext-ux-all.css)
I hope many people are using Ext JS to create great applications and they've thought about or solved such problems for themselves. I'll be grateful for any share of knowledge regarding this topic.
I have a similar situation to yours.
What I do is to first include the ext css file:
<link rel="stylesheet" type="text/css" href="resources/css/ext-all-gray.css">
Then all my app css is generated using compass. So there are a multitude of scss files that are compiled into a single css file. You can use compass watch so your css is compiled whenever a scss file changes.
I have to say that once you get used to compass and sass/scss, it's very hard to justify plain css files - compass and sass generate better cross-browser css and the scss files are far easier to maintain and customise compared to plain css.
As for the ux css. I wouldn't worry about it too much, but you have two options:
simply import your ux css files in your main scss file (see this answer);
use one of a multitude of css unifiers/mergers/minifiers out there.
Creating your theme is the only way you can keep your code well and is a good way to deploy optimized css.
Using secnha's mixins ( now partially documented in docs) you can create multiple looks for your buttons, pannels,etc. You might have some hard time to figure out how it works, but is the only way to do things well.
You will find good resources on their docs ( guides and video). Also their scss sources are a good source.