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>
Related
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.
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">
Actually we have one global.css style sheet in which we are using #import url("http://fonts.net/sample.css?type=cssandid=123") for fonts.
But it's creating issues in Bundling & minification so I got following solutions:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
and I replace #import with element
<link rel='stylesheet' type='text/css' href='http://fonts.net/sample.css?type=cssandid=123'>
even after this I'm getting CSS errors as I checked in CSS Lint(http://csslint.net/) and not getting real UI effect as with #import.
Do we have any other solutions for this?
Environment: VS2015 , MVC 5.2 , sitecore 8.1
Thanks
Hope you found the solution since you posted this question
What you can do, to avoid the #import url('yourCssUrlHere') is simply copy/paste the URL on your browser and then copy/past the CSS that is displayed.
And then simply replace the #import by the CSS you just copied.
Most of the time if the import is a font, there will be other references to .woff or .woff2 files.
Just download them and store those files somewhere on your project folder and just add their absolute link on all the url() fields.
That way, you use external fonts or stylesheets, but internally, without request them outside of your website.
After upgrading to the release version of Divshot, I've noticed that CSS #import rules aren't being loaded in the preview panel.
For example:
#import url("http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css");
#import url("styles.css");
does nothing.
I have tried different syntax and it didn't seem to help. I can put them in the head of the HTML page instead of calling them in a CSS file, but that only works for straight CSS. Font Awesome and Google font libraries rely on #import rules to work.
Any help would be appreciated.
Because Divshot runs everything secured via SSL, you will need to use the https versions of any CSS imports, or use // to make it work both ways.
I'm using the import thing in my CSS, like this
#import url(http://fonts.googleapis.com/css?family=Kite+One);
But the font doesn't load all the time. I'm still working on the CSS and refreshing periodically. Is it because of that? Is there any way to fix this?
Instead of #import, you should add a link to your page by..
<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>
Then, add the font under the body element in your stylesheet using font-family.
For Instance,
body{font-family: 'Kite One', sans-serif;}
For further doubts, refer here.
It should work now.
If you are having issues with Web fonts, you need to take a look at this
Web Font Loader
The Web Font Loader is a JavaScript library that gives you more control over font loading than the Google Fonts API provides. The Web Font Loader also lets you use multiple web font providers. It was co-developed by Google and Typekit.