如何在ASP.NET 5中引用自己的css文件？

Question

我正在尝试加载一个名为 styles.css 的文件，该文件位于

~/Content/css/styles.css

我尝试将其添加到 _Layout 页面

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

这会在该位置给出 404。

我喜欢 Bower 处理外部库的方式，并且 gulp 神奇地做了所有其他事情，比如当我请求缩小版本时缩小文件，但是通过所有这些新事物我无法添加一个简单的静态文件我自己的。

有人可以帮我参考我自己的 styles.css 文件吗？

Answer 1

您可以move/copy www 根文件夹下的Content 文件夹或使用grunt file.js 处理、合并、缩小，然后复制到wwwroot 下的文件夹。但是 ~/ 现在意味着 wwwroot

Answer 2

乔在中写道：

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.

详细说明：

在 Gulp 中有四个 API，它们是：

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

要将示例 CSS 文件中的文件从源写入目标（我想做的），您可以按如下方式定义任务：

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.
});

所有这一切都是将文件从 gulp.src cssContent（我的本地目录）移动到 gulp.dest cssDest（webroot）。

到运行在每次构建之前指定此转到 "View > Other Windows > Task Runner Explorer"，右键单击出现的名为 build:ccs 和 select "Bindings > Before Build" 的任务。

您可以使用 Gulp 做更多的事情，例如缩小、合并、分析、添加对文件的引用，但这些是基础。

注意：以上是我从 Pluralsight 上的 JavaScript Build Automation With Gulp.js 学到的。

如何在ASP.NET 5中引用自己的css文件？

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

bower

gulp

asp.net-core-mvc

asp.net-core