I create nuget about my component(.razor,.razor.cs) and some staticwebassets(.css,.js).
Once packed I'm sure nuget .nupkg > staticwebassets folder contains my css and js
but when project use nuget just can reference the razor,static file doesn't work
I tried to link my.css in index.html
but not sure is the wrong URL or other mistakes
my_nuget_component
<link href="_content/my_nuget_component/staticwebassets/my.css" rel="stylesheet" />
antdesign
<link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
how can I link static file like antdesign?
Related
I'm dipping my toes into ASP.NET 5 (vNext). To do that, I downloaded Visual Studio 2015 RC. I created a new ASP.NET Web Application. Then, in the next dialog I chose "Empty". From there I added a basic controller and a basic view.
I want to add bower and reference Zurb Foundation. However, I'm not sure how to do that. I've added a bower.json and .bowerrc file. Traditionally, I would install my bower packages in a directory called "libraries". I configured it like so:
.bowerrc
{
"directory" : "/public/libraries"
}
Then, in my views, I'd have code that looked like this:
<link rel="stylesheet" src="~/public/libraries/foundation/foundation.min.css" />
I can see that when I run bower, I am in fact downloading the libraries and they are being placed in /public/libraries. However, when I deploy it, there seems to be an issue. It looks like the deployment is getting ran from wwwroot. However, I'm not sure what to do about
Client-side packages loaded via bower
My resources (i.e. images, css, javascript, fonts, etc.) that I need my app to use.
What do I need to do to access static files a) during development which seems to use the typical file structure and b) during deployment where the stuff seems to run from wwwroot?
During development and production, you need to put stuff under the webroot if you have it defined. You can do this by gulp or grunt task. See here for an example.
Assuming you have the following structure:
└───wwwroot
├───js
│ └───foo.js
│ └───bar.js
You will be able to reach out to them by:
<link rel="stylesheet" src="~/js/bar.js" />
<link rel="stylesheet" src="~/js/foo.js" />
You should not be making reference in your views to the location of the bower dependencies, instead you should be referencing the relative path within wwwroot.
To see how it all fits I recommend creating a new project using the ASP.NET 5 Web Page template in VS 2015 RC.
In package.json your tool dependencies (resolved by npm) are listed. Notice for the default project gulp is included here. Gulp is the default task runner but you can use any task runner you like. The bower dependencies by convention are defined in bower.config.
By convention the location for bower dependencies is bower_components off the
project root.
If you look in gulpfile.js you will see that it copies the dependencies from bower_compontents to /lib off the project webroot (/wwwroot by default).
In the view _Layout.cshtml you will see the references to the libraries is ~/lib not /bower_components.
#inject IOptions<AppSettings> AppSettings
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewBag.Title - #AppSettings.Options.SiteTitle</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
asp-fallback-test-class="hidden" asp-fallback-test-property="visibility" asp-fallback-test-value="hidden" />
<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap-touch-carousel/0.8.0/css/bootstrap-touch-carousel.css"
asp-fallback-href="~/lib/bootstrap-touch-carousel/css/bootstrap-touch-carousel.css"
asp-fallback-test-class="carousel-caption" asp-fallback-test-property="display" asp-fallback-test-value="none" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
</head>
So in summary:
Define client side dependencies in bower.config (or using some
other package mananger)
Use gulp scripts to manage tasks (copying, minifying, etc).
Only make references in views to locations within webroot (using ~ relative paths).
When you build/publish all dependencies should be resolved prior to deploying
to server.
In most of LESS compilers, it's possible to use compiler to convert a .less file to a .css file. It's also possible to determine the output directory via some kind of configuration.
Is it possible to do the same in DotLess? How should I do it?
What I'm after is something similar to this configuration:
<dotless minifyCss="false" cache="true" web="false" />
<lessFile source='/content/example.less' target='/content/example.css' />
</dotless>
On the DotLess site there is a quick usage guide. Essentially, if you have set up Dotless in your project, you just need to reference the less files in your web pages, as you would a css file.
<link rel="stylesheet" type="text/css" href="bacon.less">
Dotless will then convert the less to css for you via the http handler.
Am currently working on a spring mvc project on Eclipse. Am unable to get an external css working in a .jsp . My folder structure is as follows
Myproj, WebContent,
WEB-INF,
css,
.css files
I use the following piece of code to reference the css file.
<link href="<c:url value="/css/filename.css" />" rel="stylesheet" type="text/css" />
I use spring jars version 3.1.0. I have also added the following lines of code within myproj-servlet.xml
<mvc:annotation-driven />
<mvc:resources location="../css/" mapping="/css/**"/>
Still am unable to access my css file or get it apply to my jsp file. While using firebug i see that the css link gets a 404 not found only. Where could be the issue/ how can i resolve?
Change your resource location to
<mvc:resources location="/WEB-INF/css/" mapping="/css/**"/>
and while accessing on jsp you could very well write
<c:set var="context" value="${pageContext.request.contextPath}" />
<link rel="stylesheet" type="text/css" href="${context}/css/style.css" />
Cheers.
I'm trying to link css file to xhtml page in several ways but nothing what I did want to work.
Here is folders structure of project:
Project
Java serources
WebContent
**index.xhtml**
META-INF
WEB-INF
style
**style.css**
Now in index.xhtml file I have:
<link rel="stylesheet" href="style/style.css" />
Can someone tell me what I do wrong?
Add resources folder under the WebContent
and inside resources create css folder
then access the files like this
<h:outputStylesheet library="css" name="myNewStylesFile.css" target="head" />
Here's a tutorial Resources (library) in JSF 2.0
Put your link tag as I mention below:
<link href="style/style.css" rel="stylesheet" type="text/css"/>
I am using lesscss.org's styles on my MVC application.
It works great, but unfortunately my web host does not support .less file extensions, neither will they add support.
Seeing though LessCSS makes use of JavaScript, surely there must be a way to rename my CSS file from site.less to site.css and change the JavaScript to make use of the .css extension instead of the .less extension.
Please note I am not using dotLess, and compiling prior to release is also not what I am looking for.
Finally got it working.
All i had to do is modify my web.config of my MVC web application and add the following:
<system.webServer>
...
<staticContent>
<mimeMap fileExtension=".less" mimeType="text/css" />
</staticContent>
</system.webServer>
I re-published the site to my hosting provider afrihost, and it wall worked perfectly.
The script appears to only be looking for the stylesheet/less rel. As far as I can tell, the file extension doesn't matter.
To clarify, renaming styles.less to styles.css and using the following code should work:
<link rel="stylesheet/less" type="text/css" href="styles.css">
<script src="less.js" type="text/javascript"></script>
Simply convert to css locally before you upload it.
$ lessc styles.less > styles.css
From the usage page:
http://lesscss.org/#-client-side-usage
You can pass -x for minification.