I have an #import statement in one of my css files... all my css files are bundled/minified, and apparently that is not kosher as I get an error:
run-time error CSS1019: Unexpected token, found '#import'
The import is a font from Google.
What is the proper way to handle CDN in MVC4?
thanks
This was embarrassingly simple...
In BundleConfig.cs :
bundles.UseCdn = true;
// bundles code
var cdnPath = "path to your resource (font in my case)";
bundles.Add(new StyleBundle("~/fonts", cdnPath));
Then in layout
#Styles.Render("~/fonts")
Related
I have this weird issue while using ArcGIS API for JavaScript v4.4 in my code. I am trying to build an Excel Web Add-in in which I would like to load an ArcGIS map but when I load ArcGIS I get a multipleDefine error.
ArcGIS is getting bundled with Dojo which is used as the loader for all the ArcGIS/esri packages. I have no other choices to load my own custom JS bundles with Dojo because of the way ArcGIS has built their API. So I can't decide to not use Dojo and thus not getting the multipleDefine error.
I load my own JS files like this:
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<script>
var dojoConfig = {
parseOnLoad: false,
async: false,
// we make aliases for our js file
aliases: [
['index', './Bundles/index.js'],
],
};
</script>
<script src="https://js.arcgis.com/4.4/init.js"></script>
<script>
require(['index'], function (index) {
//...do something
});
</script>
When I restart the page I get a multipleDefine error once in every two/three trials. After a lot of investigation I understood that the error lies with the Office.js API but I had a hard time to find a good solution.
After a while I found the cause of the problem; we cannot start office-js and Dojo together because they both want to add scripts in the head tag of our page and somehow they end up in conflict with one another, thus we get the dreaded multipleDefined Dojo error and some of our files do not get loaded.
Once this cause was identified I decided to solve it by making sure Dojo, Argis and my custom js files got loaded once Office and dependencies were fully loaded.
I implemented it like this in my js code:
// This Dojo config variable has to be defined before Dojo is loaded in our scripts
var dojoConfig = {
// we make aliases for our custom js file
aliases: [
['index', './Bundles/index.js'],
],
// We require our dependencies (our own code bundles) with Dojo.
// Notice that it is mandatory to bundle our js files
// as AMD Modules for Dojo to be able to load them as dependencies.
deps: ['index'],
};
// Once office has fully initialized we can add our arcgis file and let
// him load our own required javascript files.
// We cannot start Office-js and Dojo/Arcgis together because they both
// want to add scripts in the head tag of the HTML page and
// somehow they end up in conflict, thus we get the dreaded
// multipleDefined Dojo error and some of our files
// do not get loaded.
Office.initialize = function (reason) {
// we manually add the Arcgis script to the header of our page
// once we are sure Office and dependencies has fully loaded.
var tag = document.createElement('script');
tag.src = 'https://js.arcgis.com/4.4/init.js';
document.getElementsByTagName('head')[0].appendChild(tag);
};
Once this was added the code started working like a charm.
I try to use Arcgis javascript API in Liferay 7.0 but it's fail. I think because Liferay 7.0 using requireJS for using javascript which conflict with dojo of Arcgis javascript API. I am using this code for implement Arcgis API:
<script type="text/javascript" src="<%=request.getContextPath() %>/js/arcgis_js_api/library/3.14/3.14/init.js"></script>
<script>
require([
"esri/map", "dojo/dom"
], function(Map, dom) {
var map = new esri.Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
zoom: 13
});
});
This is console log:
java.lang.IllegalArgumentException: Path esri/map.js does not start with a "/" character
java.lang.IllegalArgumentException: Path dojo.js does not start with a "/" character
This is javascript error:
Error: defineAlreadyDefined
Anyone has solution help me please. Thanks!
As you mention Liferay7 and your script tag makes use of <%=request.getContextPath()%>, you most likely have a mismatch between your portlet and the servlet API: request is not aware of any portlet context (but is still there, because JSPs have been designed for servlets and it's a mandatory object that's around, irritating a lot of people)
The URLs for your own Javascript files are just not relative to the context root, but Liferay makes them available on a different path. The easiest way, without messing around with this location, is to just mention the file you'd like to include in your portlet's configuration. In Liferay 7 OSGi portlet modules, it works like this (pseudocode, simplified)
#Component(
immediate = true,
property = {
"com.liferay.portlet.footer-portlet-javascript=/js/main.js",
"javax.portlet.display-name=My Portlet",
},
service = Portlet.class
)
In JSR-286 portlets packaged in WARs, you'd use the footer-portlet-javascript value in WEB-INF/liferay-portlet.xml.
Alternatively, use the header-* variant.
I personally prefer this way over memorizing how the path of resources is being constructed.
I use this code before implement arcgis (javascript):
if(typeof define !== "undefined" && typeof require !== "undefined"){
window.__define = window.define;
window.__require = window.require;
window.define = undefined;
window.require = undefined;}
It will be resolved.
Let's say I have modules similar to this one:
"use strict";
var moduleCss = require("module1.css");
var template = require("module1.hmtl");
module.exports = function(){
//my module code here
};
And another one with a different css file.
"use strict";
var moduleCss = require("module2.css");
var template = require("module2.hmtl");
module.exports = function(){
//my module code here
};
The main file would look like this:
"use strict";
var module1 = require("module1");
var module2 = require("module2");
var normalize = require("normalize.css");
var bootstrap = require("bootstrap.css");
module.exports = function(){
//my module code here
};
Instead of appending each css file content as a style tag, i'd like to get a main.css when building the main bundle by looking at each required css file in each module and building a single CSS file containing all the styles in all required modules so that I can append this single css file where I want.
I'm basically trying to have the css requirements in the same spot as the js and html requirements. The solutions that I found so far require a different CSS file that keeps track of each module css dependency, so adding or removing a module in my applications requires work in 2 files, the main js and the main css.
Is there a way to achieve this? To have ALL dependencies into one file? Or could a "package.json" thingy be used for each module where the CSS dependencies could be declared?
After playing around a little bit with browserify it turned out the transform function hook reveals the file name of each required file. I basically looked for css and less file, return a empty module for them, and kept each file in a reference array.
After the bundle was done, by listening to the bundle event, I created a string where I basically "included" each file that I captured in the reference array.
With the import file created, I simply passed it to the less compiler.
Here's a link to the gist for my current task : https://gist.github.com/vladnicula/fd1ff7b30ef20789e1dc
I have few JS files which i am trying to Bundle using MVC4, the code is as follows:-
public static void RegisterBundles(BundleCollection bundles)
{
//Global App Items go here.
bundles.Add(new ScriptBundle("~/Scripts/modernizr")
.Include("~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/lib")
.Include(
"~/Scripts/jquery.js",
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*",
"~/Scripts/jquery-ui*",
"~/Scripts/jquery.tablesorter.js"));
bundles.Add(new StyleBundle("~/content/bootstrap")
.Include("~/Content/bootstrap.css"));
var lessBundle = new Bundle("~/content/myApp").Include(
"~/Content/jqueryMultiSelect.less",
"~/Content/scrollbars.css");
lessBundle.Transforms.Add(new LessTransform());
lessBundle.Transforms.Add(new CssMinify());
bundles.Add(lessBundle);
BundleTable.EnableOptimizations = true;
}
Now, when i see my console in Firefox, I can see my Response as Expected. But when same i do it in Chrome, the bundled file is broken.
Broken may be a non-technical term, What i mean by broken is :-
The file is incomplete....
Please let me know, if i need to provide more detail.
Its actually the display issue.
In chrome the js file length is limited, so does not display completely.
Try to open that file in a new tab, you will see the entire content.
In Firefox, it prompts the user to open in a new tab to see the complete content.
I would like to use a native extension (ANE) in Flash CS5.5. I saved the ANE as a SWC and added it to my project, but this error keeps on coming up:
Error message:
1172: Definition qnx.events:InvokeEvent could not be found.
ActionScript:
import qnx.events.InvokeEvent;
import qnx.invoke.*;
//NOTE: THIS MUST BE THE FIRST THING SET IN YOUR APPLICATION CONSTRUCTOR
InvokeManager.invokeManager.addEventListener(InvokeEvent.INVOKE, onInvoke );
function onInvoke( event:InvokeEvent ):void
{
if( InvokeManager.invokeManager.startupMode == InvokeStartupMode.INVOKE )
{
//invoked as an application/target.
var mydata:InvokeRequest = InvokeManager.invokeManager.startupRequest;
}
else if( InvokeManager.invokeManager.startupMode == InvokeStartupMode.VIEWER )
{
//invoked as a viewer
var myotherdata:InvokeViewerRequest = InvokeManager.invokeManager.startupViewerRequest;
}
else
{
//launched by the pressing on the icon on the home screen.
}
}
Is there anything missing in the code?
I never used an ANE/SWC before, so any help is welcome.
I uploaded the files. Would be great if someone could take a look at them:
Download: http://www.sendspace.com/file/gjqp1w
Thanks.
How are you packaging the application? This error generally means the extension is not being packaged correctly with the application.
I believe from CS5.5 you still have to use the adt command line to specify the location of the ANE file when packaging, so if you're just exporting from CS5.5 you'll get this error.
Something like the following:
adt -package
-target ipa-ad-hoc
-storetype pkcs12 -keystore ../AppleDistribution.p12
-provisioning-profile AppleDistribution.mobileprofile
myApp.ipa
myApp-app.xml
myApp.swf icons Default.png
-extdir extensionsDir
Additionally you have to make sure you add the extensions id to you application descriptor:
<extensions>
<extensionID>com.extension.id</extensionID>
</extensions>