How to reference own css file in ASP.NET 5?

问题

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?

回答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

回答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".

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.

来源：https://stackoverflow.com/questions/31631613/how-to-reference-own-css-file-in-asp-net-5