1

I am trying to load a file called styles.css which is located in

~/Content/css/styles.css

What I tried is adding it to the _Layout page

<link rel="stylesheet" href="~/Content/css/styles.css" />

This gives a 404 on that location.

I like the way how bower handles external libraries and gulp magically does all the other stuff like minifying a file when I request a minified version, but through all this newness I cannot add a simple static file of my own.

Could someone be so kind to help me reference my own styles.css file?

2 Answers 2

2

Joe wrote in his answer:

You can either move/copy the Content folder under www root folder or use grunt file.js to process,combine,minify, and then copy to a folder under wwwroot. But ~/ now means wwwroot.

To elaborate on this:

In Gulp there are four APIs, being:

gulp.task: Define a task
gulp.src: Read files
gulp.dest: Write the files
gulp.watch: Watch the files

To write files from example CSS files from a source to a destination (what I wanted to do), you can define a task as follows:

var gulp = require('gulp')

var paths = {
    webroot: './wwwroot/',
    cssContent: './Content/css/**/*.css'
};

paths.jsDest = paths.webroot + 'js/';
paths.cssDest = paths.webroot + 'css/';

gulp.task('build:ccs', function () {     // Define a task called build.css
    console.log('Building Cascading Style Sheets...')
    gulp.src(paths.cssContent)           // Look for files in the source.
                                         // Do optional other stuff
        .pipe(gulp.dest(paths.cssDest)); // Put it in the wwwroot.
});

All this will do is move files from the gulp.src cssContent (my local directory) to the gulp.dest cssDest (the webroot).

To run this before every build specify this go to "View > Other Windows > Task Runner Explorer", right click on the task that appeared called build:ccs and select "Bindings > Before Build".

Screenshot of above explanation

You can do a lot more with Gulp like minifying, combining, analyzing, adding references to file, but these are the basics.

Note: I learned the above from JavaScript Build Automation With Gulp.js on Pluralsight.

Sign up to request clarification or add additional context in comments.

Comments

1

You can either move/copy the Content folder under www root folder or use grunt file.js to process,combine,minify, and then copy to a folder under wwwroot. But ~/ now means wwwroot

7 Comments

Thanks. Could you elaborate on how the gruntfile.js can "process, combine, minify, and then copy to a folder under wwwroot" the files?
I recommend as a starting point create a new project using the vs 2015 project template and study the grunt file they create for you. Basically for client side stuff we now user bower and grunt to implement such things as managing our 3rd party js dependencies and to do the kinds of things we previously did with bundles. If you google such things as grunt bower visual studio asp.net 5 etc you will find some tutorials. If I was on my of I would post a few links that helped me but at the moment I'm on my iPad
Thanks Joe. blogs.msdn.com/b/martinkearn/archive/2015/06/29/… helped a lot. I now have an idea for a soltuin: I need to find or create a task for moving certain local files into the wwwroot on build.
another observation is in the latest vs 2015 asp.net 5 project template they put site.css in wwwroot/css and gruntfile processes it into site.min.css in the same folder. I think whether in dev where we want unminified or in production where we want minified and bundled, in both cases to use css or js files they need to be below wwwroot. So is there any reason to have a Content folder under the web app? It might as well just live below wwwroot. If we want to leave out the unminified stuff when publishing we can have it in a specific folder under wwwroot and use publishExclude from project.json.
and one final related tip is have a look at the file Views/Shared/_ValidationScriptsPartial.cshtml in the latest asp.net 5 project template. It shows how we can configure different scripts in dev vs production, and how to use cdn with fallback
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.