- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在 osx 中使用 yeoman 创建了一个新的 dotnet 核心项目。所以,它没有 package.json 和 gulpfile.js。我已经手动添加了它们
我已经删除了 main.css 和 main.min.css 文件 ./wwwroot/css 因为我在 scss 中编写了我所有的样式所以它会自动生成 .css 文件
但是,在这种情况下什么也没有发生。没有生成 .css 并且 scss 样式不起作用
当构建我的项目并在编辑 sass 文件后使用 dotnet run
命令运行它时,没有任何反应。没有生成 css 文件
./wwwroot/styles/scss/main2.scss
$base: #CC0000;
body {
background-color: $base;
}
package.json
{
"devDependencies": {
"gulp": "3.8.11",
"gulp-concat": "2.5.2",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.2.0",
"rimraf": "2.2.8",
"gulp-sass": "1.3.3"
}
}
gulpfile.js
/// <binding Clean='clean' />
"use strict";
var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify"),
sass = require("gulp-sass");
var paths = {
webroot: "./wwwroot/"
};
paths.js = paths.webroot + "js/*.js";
paths.minJs = paths.webroot + "js/*.min.js";
paths.css = paths.webroot + "css/*.css";
paths.minCss = paths.webroot + "css/*.min.css";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";
gulp.task("sass", function() {
return gulp.src("./wwwroot/styles/scss/main2.scss")
.pipe(sass())
.pipe(gulp.dest(project.webroot + '/css'));
});
gulp.task("clean:js", function(cb) {
rimraf(paths.concatJsDest, cb);
});
gulp.task("clean:css", function(cb) {
rimraf(paths.concatCssDest, cb);
});
gulp.task("clean", ["clean:js", "clean:css"]);
gulp.task("min:js", function() {
return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
.pipe(concat(paths.concatJsDest))
.pipe(uglify())
.pipe(gulp.dest("."));
});
gulp.task("min:css", function() {
return gulp.src([paths.css, "!" + paths.minCss])
.pipe(concat(paths.concatCssDest))
.pipe(cssmin())
.pipe(gulp.dest("."));
});
gulp.task("min", ["min:js", "min:css"]);
project.json
{
"dependencies": {
"Microsoft.NETCore.App": {
"version": "1.1.0",
"type": "platform"
},
"Microsoft.AspNetCore.Diagnostics": "1.1.0",
"Microsoft.AspNetCore.Mvc": "1.1.0",
"Microsoft.AspNetCore.Razor.Tools": {
"version": "1.1.0-preview4-final",
"type": "build"
},
"Microsoft.AspNetCore.Routing": "1.1.0",
"Microsoft.AspNetCore.Server.IISIntegration": "1.1.0",
"Microsoft.AspNetCore.Server.Kestrel": "1.1.0",
"Microsoft.AspNetCore.StaticFiles": "1.1.0",
"Microsoft.Extensions.Configuration.EnvironmentVariables": "1.1.0",
"Microsoft.Extensions.Configuration.Json": "1.1.0",
"Microsoft.Extensions.Configuration.CommandLine": "1.1.0",
"Microsoft.Extensions.Logging": "1.1.0",
"Microsoft.Extensions.Logging.Console": "1.1.0",
"Microsoft.Extensions.Logging.Debug": "1.1.0",
"Microsoft.Extensions.Options.ConfigurationExtensions": "1.1.0",
"Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.1.0"
},
"tools": {
"BundlerMinifier.Core": "2.2.306",
"Microsoft.AspNetCore.Razor.Tools": "1.1.0-preview4-final",
"Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.1.0-preview4-final"
},
"frameworks": {
"netcoreapp1.1": {
"imports": [
"dotnet5.6",
"portable-net45+win8"
]
}
},
"buildOptions": {
"emitEntryPoint": true,
"preserveCompilationContext": true
},
"runtimeOptions": {
"configProperties": {
"System.GC.Server": true
}
},
"publishOptions": {
"include": [
"wwwroot",
"**/*.cshtml",
"appsettings.json",
"web.config"
]
},
"scripts": {
"precompile": ["dotnet bundle"],
"prepublish": [
"npm install",
"bowser install",
"gulp clean",
"gulp min"
],
"postpublish": ["dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%"],
"prebuild": "gulp sass",
"postbuild": "echo after building",
"prepack": "echo before packing",
"postpack": "echo after packing",
"prerestore": "echo before restoring packages",
"postrestore": "echo after restoring packages"
},
"tooling": {
"defaultNamespace": "Sample"
}
}
更改“预编译”后:[“gulp sass”]
$
dotnet run
Project Sample (.NETCoreApp,Version=v1.1) will be compiled because project is not safe for incremental compilation. U
se --build-profile flag for more information.
Compiling Sample for .NETCoreApp,Version=v1.1
[08:50:23] Warning: gulp version mismatch:
[08:50:23] Global gulp is 3.9.1
[08:50:23] Local gulp is 3.8.11
[08:50:23] Using gulpfile ~/Unity3D/DotNetCore/Sample/gulpfile.js
[08:50:23] Starting 'sass'...
[08:50:23] Finished 'sass' after 19 ms
Compilation succeeded.
0 Warning(s)
0 Error(s)
最佳答案
请尝试以下 2 个想法:
将“预编译”脚本添加到 project.json 文件的 scripts 部分,它会调用 gulp sass 任务:
"precompile": ["gulp sass"]
将您的 gulp sass 任务更改为以下内容:
gulp.task("sass", function() {
return gulp.src("./wwwroot/styles/scss/main2.scss")
.pipe(sass())
.pipe(gulp.dest(paths.webroot + '/css'));
});
任务当前引用了一个名为 project 的变量,该变量不存在。
此外,要修复 gulp 版本不匹配警告,请从 package.json 文件所在目录的命令 shell 运行以下命令:npm i -D gulp@3.9.1
或者,您可以将 package.json 文件中 gulp 的 3.8.11 版本号更改为 3.9.1。
关于sass - 如何从 scss 文件生成 css 文件 dotnet core,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42015663/
我实际上正在尝试构建一个 gulp 计划来做网络相关的事情,比如编译 sass、缩小 css、丑化 javascript 等等。但我真的在使用 sass 时遇到了麻烦。 这是我的代码示例: gulp.
为了简化样式的描述,浏览器设计了 css 作为 DSL(领域特定语言)。css 写起来简单,但在很多方面都不太方便,比如不支持嵌套,代码比较冗余;不支持继承和混合,代码不好复用等。 为了给 c
如何编译sass模块(新版sass)? https://css-tricks.com/introducing-sass-modules/ 我尝试了 sass-migrator 终端,但它没有编译 ht
在 SASS 中,当出现错误时,它会在浏览器的页面顶部显示一条消息。它的一个样本在附图中。 该文本不可选择。它不是图像。它不会出现在“查看源代码”中。它在 Firebug 中不可见。 错误文本是如何呈
我想决定何时编译.sass文件。换句话说,我不想看文件,而是手动编译。 我该怎么做? 最佳答案 它比我想象的要简单: sass style.scss style.css 关于sass - 我如何在不观
我希望有一个像 +stacktextshadow(blue, red, green) 这样的 mixin吐了text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3p
我想在我们公司的 Web 应用程序上使用 SASS,但我无法在生产机器上安装任何程序。我搜索的有关 SASS 的所有内容都需要您运行 gem 之类的安装程序,并且还需要 HAML。 我希望找到一个脚本
From the docs我看到您可以更改 SASS 的缓存位置。 但是,我不确定要使用的确切语法。我有一个 Zurb 基金会项目,随之而来的是一个 config.rb文件。我认为这是需要更新以更改缓
也许更好的问题是,有没有更有效的方法来覆盖 mixin 的一部分? 这段SCSS: @mixin button { .button { background-color: red;
我正在使用多行注释 /** 常见样式请看这里*/样式定义继续... 我在编译时遇到错误。它说: Error: Invalid CSS after "*/": expected identifier,
我正在尝试在 Nuxt.js 中使用 sass 包而不是 node-sass 。我找到了这样的配置; // vue.config.js module.exports = { css: {
我正在使用多行注释 /** 常见样式请看这里*/样式定义继续... 我在编译时遇到错误。它说: Error: Invalid CSS after "*/": expected identifier,
我正在尝试在 Nuxt.js 中使用 sass 包而不是 node-sass 。我找到了这样的配置; // vue.config.js module.exports = { css: {
重复问题? 是的。但与this有点不同 概述: 我也是括号文本编辑器的新用户。我知道 Scss 和 Sass 之间的区别。但是我使用方括号文本编辑器的原因只是为了 Sass 而不是 Scss。 看了J
我正在寻找像 +stacktextshadow(blue, red, green) 这样的 mixin text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px
我决定删除 node-sass来自我的 gatsby 项目并使用 sass反而。我遵循了所提到的here对于 v3。我删除了 node-sass现在我的 package.json 中有这些版本: "g
我正在使用 vanilla Sass(没有 Compass/SUZY/Bourbon/etc.),但我无法确定将 *.rb 文件放在哪里。我不是 Ruby 程序员,但我确实找到了一个其他人编写的函数,
我刚开始使用gulp-sass ,是否有一种“简单”的方法来找出正在使用的 Sass 版本? 并不是说我认为这太重要了,但我正在使用 gulp-sass在 Visual Studio 2015 (CT
我正在为 sass 实现 grunt 插件到 css 处理,但有 2 个选项可用 grunt-contrib-sass 和 grunt-sass。 我在互联网上搜索但找不到任何相关答案 grunt-c
我试图在 Angular 项目中使用 CSS 变量和 Sass 函数(准确地说是 lighten()/darken()),据我所知,最新版本的 LibSass 允许这样做。 我已安装 node-sas
我是一名优秀的程序员,十分优秀!