I'm in a .NET shop; Octopus and TeamCity are used for deploying to our testing and production environments. I added some .WOFF2 fonts to the /_css/fonts folder, and I'm referencing them as follows:
#font-face {
font-family: Roboto;
src: url(/_css/fonts/Roboto-Bold-webfont.eot);
src: url(/_css/fonts/Roboto-Bold-webfont.woff2) format('woff2'), url(/_css/fonts/roboto-bold-webfont.woff), <!-- other fallback fonts -->
The .WOFF2 fonts appear on localhost, but somehow they are being omitted from the build output. What's weird is there is a reference to a .WOFF2 of FontAwesome that is successfully being output. I've checked the properties of the fonts in Visual Studio, and all the new (non-outputting) fonts are set to Copy Always to output directory. Despite all our efforts, we keep getting 404 errors for those fonts.
TIA for any help you can provide!
You can add a MIME type inside the IIS Manager.
Open the "MIME types" in your server Home page (or Home page of your specific
Add ".woff2" with MIME type "font/woff2".
In my case it works with IIS 7.5.
Related
I am serving a dist folder from a vue app (created with create-vue-app). However, it serves well when I am not pointing to some specific route, just use the root route without anything. However, if I specify a sub-route, e.g like '/static' , the it does not serve the vue app dist index.html... I get the message in browser:
Refused to apply style from 'http://localhost:3000/css/app.fc1b515e.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
4localhost/:1 GET http://localhost:3000/js/app.6869d12b.js net::ERR_ABORTED 404 (Not Found)
however, it finds the favicon.ico if I enter it to the path in browser...
sometimes, I also get the error message that tells me javascript is not enabled (which is wrong)...
This is how I set up my routes:
app.use('/static',express.static(path.join(__dirname, '\\client\\dist')));
Your Vue app is referencing assets relative to /, like this:
/css/app.fc1b515e.css
/js/app.6869d12b.js
...but you are serving the assets at /static:
/static/css/app.fc1b515e.css
/static/js/app.6869d12b.js
You can set the publicPath configuration option to /static/ in vue.config.js to ensure that your Vue app references the static assets correctly.
Docs:
https://cli.vuejs.org/config/#publicpath
Hope this helps.
I'm building a chrome extension, and using a vue-cli webpack config. I'd like to be able to use the vue devtools after running the npm run build command.
I tried to add Vue.config.devtools = true; in main.js, or change NODE_ENV: '"production"' to NODE_ENV: '"development"', but vue devtools is still not showing up.
What can I do to enable vue devtools in production mode?
First,use Vue devtools in Chrome ext Development environment is enabled.
Experience
These days I'm developing a Chrome browser plugin.I found that __VUE_DEVTOOLS_GLOBAL_HOOK__ undefined.
Although not a big problem, but I want to solve it.I have searched a lot of information online.
example:
1.open chrome-extension://<hash>/app.html
2.set Vue.config.devtools to be true
3.grant Vue Devtools ext file access
but all doesn't work.
Solution
As we know, vue-devtools is an essential piece of the Vue ecosystem, but it is currently tied to a web browser.
But now There is a package provides a standalone vue-devtools application, that can be used to debug any Vue app regardless of the environment. Now you can debug your app opened in mobile browser, safari, native script etc. not just desktop chrome or firefox.
This package name is vue-remote-devtools, which is a standalone electron shell to remotely debug Vue apps!
Let's have a try:
Following the README.md steps,
Install the package globally:
npm install -g #vue/devtools
run in your terminal: vue-devtools
you will see a electron app appear like this
3.inject the script tag to your Chrome Extension .html file.
Warning
Due to Chrome's Content Security Policy (CSP) restrictions on plug-ins,Chrome Extension's web request may be blocked.
At this point you need to modify the Chrome Ext configuration file manifest.js.
content_security_policy: "script-src 'self' 'unsafe-eval' http://localhost:8098; object-src 'self'"
Although you can copy content_security_policy to the corresponding file manifest.js, but I still hope you can find out what the CSP is:
What is Content Security Policy (CSP)
Finally
Connect Success！
Ref:
vue-remote-devtools
DevTools for Chrome Extension Development.
It looks like I have the problem because I'm trying to use vue devtools in Chrome extension. Unfortunately, it's impossible to use vue devtools because extension pages are served over chrome-extension://.
Further reading: https://github.com/vuejs/vue-devtools/issues/120
I have downloaded the Metro CSS via Bower by including it in the Bower.json file:
"metro-ui-css": "3.0.13"
This appears to install the Metro stuff under /wwwroot/lib/metro-ui-css/build/css and also /fonts and /less folders.
I have included the following references in my _Layout.cshtml file:
<environment names="Development">
<link rel="stylesheet" href="~/lib/metro-ui-css/build/css/metro.css">
And under the <head> section::
<environment names="Development">
<script src="~/lib/metro-ui-css/build/js/metro.js"></script>
But no matter which Metro class I try to include in a View .cshtml file the Classes will not appear. Any idea what I am doing wrong and how I can get them to display?
Many thanks
Create a new Bundle
In the 'App_Start' folder of your solution, find the 'BundleConfig.cs' file and open it. Here you can add a new bundle, for example:
bundles.Add(new ScriptBundle("~/bundles/metroJs").Include(
"~/Scripts/metroJs.js"));
bundles.Add(new StyleBundle("~/Content/metroJs").Include(
"~/Content/metroJs.css"));
Your paths to the .js and .css files may be different, however this may also be correct.
Once you've done that, go back to your '_Layout.cshtml' file and at the bottom you'll more than likely already have some '#Scripts.Render()'. Just add one with the name of the new bundle you just created like so:
#Scripts.Render("~/bundles/metroJs")
#Styles.Render("~/Content/metroJs")
I have a node.js Web App in Azure,
the site loads the index.html, the css, images, etc. but the JS search functionality doesn't initialize,
I did an F12 inspection in Chrome and saw this error
[domain].azurewebsites.net/data/policies.json Failed to load resource: the server responded with a status of 404 (Not Found)
in the Azure console I can see the file list
> cd public
D:\home\site\wwwroot\public
> cd data
D:\home\site\wwwroot\public\data
> ls
D:\home\site\wwwroot\public\data
policies.json
according to the folder/file structure (everything is in the /public folder) I have made a configuration change as follows
/ = "site/webroot/public"
the folders are laid out like this
/public/index.html
/public/data
/public/js
/public/css
etc
Without the config setting the website doesn't see /public as the root folder, so it doesn't find the index.html and nothing loads.
So the site loads, which is great,
the images and css load, which is great
but it says it can't find the .json file in the data folder?
(and using the console the file is definitely there!)
please advise.
You need to set the JSON MIME type in web.config
This link explains how to fix it:
http://blogs.msdn.com/b/africaapps/archive/2013/06/07/how-to-serve-static-json-files-from-a-windows-azure-website.aspx
I am aware that this question is asked here but I have tried the solutions mentioned to no affect.
My CSS declration looks like:
#font-face {
font-family: gillsans;
src: url('gillsans.TTF');
}
This works in Chrome but not FireFox.
Weirdly enough, I have another site that uses the exact same declaration but with a different font and it works fine:
#font-face
{
font-family: bebas;
src: url('bebas.TTF');
}
Could this have something to do with the actual font file?
I have also tried modifying my .htaccess file as suggested:
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Again no results in FireFox.
I have tried changing .TTF to .tff and providing absolute paths to the file, but still nothing.
Can anyone suggest something I can try?
The only possible thing could be is that this site is in development and is thus using a temporary URL, but I dont understand how that could effect it.
Try other font types like eot,woff & svg. To convert you can use http://www.onlinefontconverter.com/
and then try this code in your style or css file:
<style type="text/css">
#font-face {
font-family:'bebas';
src:url('bebas.eot');/*IE9 or later*/
src:local('bebas'),/*check for font installation*/
local('b ebas'),/*check for font installation in some browsers like Safari*/
url('bebas.eot?#iefix') format('embedded-opentype'),/*hack for IE8 or earlier*/
url('bebas.woff') format('woff'),/*new browsers*/
url('bebas.ttf') format('truetype'),/*all browsers excpet IE*/
url('bebas.svg#bebas') format('svg');/*old iOs*/
}
.bebas-ft{
font-family:bebas, Tahoma, Geneva, sans-serif;
}
</style>
And also do not modify your .htaccess file for such simple matter!
So I downloaded another version of Gill Sans (still ttf) and replaced the one I have it that fixed it. Weird.