缩进 Sass 语法不适用于 node-sass 和 gulp-sass

2024-02-06

Libsass 2.0 为 libsass 用户带来了缩进语法,但到目前为止我还无法让它与node-sass and gulp-sass。我有所有最新版本:

节点 sass: 0.93
gulp-sass: 0.7.2
gulp: 3.8.2

这个设置编译.scss文件甚至.sass使用括号语法的文件,但不会编译缩进语法。有人成功用node-sass和gulp编译了缩进语法吗?

My gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
    return gulp.src('./sites/all/themes/nsfvb/sass/screen.sass')
        .pipe(sass({
            includePaths: require('node-neat').includePaths,
            errLogToConsole: true
        }
        ))
        .pipe(gulp.dest('./sites/all/themes/nsfvb/css'));
});

gulp.task('watch', function() {
    gulp.watch('./sites/all/themes/nsfvb/sass/*.sass', ['sass']);
});

gulp.task('default', ['sass', 'watch']);


运行默认任务时出错

error: invalid top-level expression


更新的答案:

如果要使用缩进语法 (.sass) 作为顶级文件,请使用 sass({indented Syntax: true})。

sass({indentedSyntax: true})

过时的答案

在这里找到答案:https://github.com/dlmanning/gulp-sass/issues/55#issuecomment-50882250 https://github.com/dlmanning/gulp-sass/issues/55#issuecomment-50882250

使用默认设置编译 sass 文件不起作用。不过,有一个解决方法。如果您传递 sourceComments: 'normal' 作为参数,则编译工作。原因是有一个奇怪的情况改变了文件的处理方式:https://github.com/dlmanning/gulp-sass/blob/master/index.js#L23-L27 https://github.com/dlmanning/gulp-sass/blob/master/index.js#L23-L27

代码示例在这里找到:https://github.com/chrisdl/gulp-libsass-example/blob/master/gulpfile.js https://github.com/chrisdl/gulp-libsass-example/blob/master/gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');

// Run with "> gulp sass" in terminal.
gulp.task('sass', function () {
gulp.src('./sass/main.sass')
    .pipe(sass({sourceComments: 'normal'}))
    .pipe(gulp.dest('./css'));
});

Notice

如果您在使用此代码片段时遇到问题,请查看以下引用和问题。

使用此解决方法将导致 gulp 管道中较早的文件内容(例如较早的插件)的任何更改被丢弃 - JMM

https://github.com/dlmanning/gulp-sass/issues/158 https://github.com/dlmanning/gulp-sass/issues/158

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

缩进 Sass 语法不适用于 node-sass 和 gulp-sass 的相关文章

  • 关于调试打印样式表的建议?

    我最近一直在为一个网站制作打印样式表 我意识到我不知道如何有效地调整它 在屏幕布局上工作时有一个重新加载周期是一回事 更改代码 命令选项卡 reload 但是当您尝试打印时 整个过程会变得更加困难 更改代码 命令选项卡 reload pri
  • 如何修改sass中的根父选择器[重复]

    这个问题在这里已经有答案了 如何修改父选择器链的根元素 使用 sass 3 3 x 类似 prepend prefix at root prefix note there is no dot separating it content fo
  • 角 2 材料容器固定不工作

    我对 CSS 和 Angular 2 材质有疑问 任何固定定位元素的行为都不像固定在 md sidenav container 内 如果它不在容器内 则它可以正常工作 这是该问题的链接 只需将 md toolbar 复制并粘贴到容器内部 您
  • 使用 css3 列 - 如何获取元素位置?

    为了将长 html 文件与列分开 我使用了 css3 列 padding 0px height 1024px webkit column gap 0px webkit column width 768px 我想获取指定元素的位置 所以我使用
  • 如何使用 Node.js 异步服务多个 QBWC 客户端

    这个想法是使用 Node js 实现 QBWC Web 服务 它可以以异步方式服务多个传入请求 目前我正在研究qbws https github com johnballantyne qbws 这是 QuickBooks Desktop W
  • 给定 url,如何加载图像,然后将其转换为 Javascript 中的 tf.tensor 数据?

    我是前端和 javascript 新手 现在我正在编写一个基于 CNN 的 Web 应用程序 要从给定的 url 加载图像 然后将图像输入 CNN 我尝试编写以下代码 async function getImage var img new
  • Gitlab CI/CD 管道给出 Dockerfile 错误

    晚上好 我正在尝试将我的nodeJS应用程序部署到我的Digital Ocean Server 它说找不到我的Dockerfile 我确实检查过 Dockerfile 没有 txt 扩展名 任何指导表示赞赏 我在 Gitlab 项目中设置了
  • CSS flex-basis: 0% 与 flex-basis: 0px 有不同的行为

    根据MDN https developer mozilla org en US docs Web CSS flex the flex 1应设置简写flex basis 0 然而 它实际上设置了flex basis 0 更令人惊讶的是 这有不
  • 复制 Chrome 默认输入的轮廓样式

    如何设置默认 Chrome 输入的轮廓样式 焦点上为橙色 使其在每个浏览器中看起来都相同 Chrome 风格似乎是textarea focus outline rgb 229 151 0 auto 5px outline offset 2p
  • 调整大小后获取实际图像大小

    我有一个充满缩略图的页面 用 css 调整大小150x150 当我单击缩略图时 页面变暗 并且图像以其真实尺寸显示 目前 我必须手动创建一个包含所有图像的实际高度的数组 为了解决设计问题 减少画廊的手动操作 我需要在调整图像大小 CSS 后
  • 占位符不适用于 Internet Explorer

    我的应用程序出现了小问题 Internet Explorer 11 上不存在占位符 我尝试了下面的 CSS 示例 但没有成功 ms input placeholder IE10 11 color ccc important font wei
  • 如何使单词中的每个字母在悬停时发生变化

    假设我的网站上某个段落中有一个单词 IamGreat 我希望它在悬停时更改为 Good4you 但是 我不想更改整个单词 而是希望每个字母单独更改 因此 如果我将鼠标悬停在字母 I 上 它将变成字母 G 字母 r 将变成数字 4 等 这两个
  • 有没有一种方法可以使页面布局在 100% 缩放下完美契合,同时又尊重更大的缩放系数?

    有多种方法可以布局网页 使其适合浏览器视口 DOMwindow 当我说 适合 时 我包括更改所用字体的大小 更改 DIV IMG 和其他渲染元素的宽度和高度 以及允许元素 流畅 移动 目标是使页面在所有显示设备 从小型手机到大桌面屏幕 上看
  • 自定义字体有时在 IE8 / IE7 中以斜体呈现

    在 IE7 和 IE8 中 当使用自定义 Web 字体时 文本有时会以斜体呈现 即使我明确设置font style normal 这个问题是偶发的 它会渲染几次 然后我刷新 一切都是斜体 然后我刷新 它恢复正常 我正在用这个 font fa
  • 向 Twitter Bootstrap 添加新字体系列

    我怎样才能按照他们的方式将新的字体系列添加到 twitter bootstrap 中 他们使用一种叫做 woff 的东西 我正在尝试将 roboto 添加到 css 文件中 我怎样才能像他们那样做 woff 的事情呢 font face f
  • 节点持久-NodeJS

    谁详细向我解释了如何操作以下说明 var storage require node persist var account username Morris password test storage initSync storage set
  • NodeJS 和 PHP (Laravel) 集成用于 Socket.IO 实时聊天

    目前我有一个我写过的网站PHP通过Laravel 框架 我已经使用写了一个实时聊天nodeJS with 套接字IO and Express现在我想做的是将它集成到我已经编写的 Laravel 网站中 问题是聊天必须在主页中 当前由 Lar
  • 如何在nodejs中处理大量对象

    我想处理长度约为 100 000 的数组 而不会给 CPU 带来太多负载 我研究了流并偶然发现了 highlandjs 但我无法使其工作 我也尝试过使用 Promise 和分块处理 但它仍然给 CPU 带来很大的负载 如果需要 程序可能会很
  • 使用带有箭头的 MaterializeCSS 轮播 - 如何使用普通 javascript 进行初始化

    我正在尝试使用 MaterializeCSS 创建带有箭头的轮播 我正在尝试使用这个代码笔 https codepen io Paco Cervantes pen ZLxKpj取得有限的成功 我想使用普通的 javascript 而不是 j
  • CSS3 背景渐变未验证,有人可以告诉我为什么吗?里面的代码示例

    有人能告诉我为什么下面的 css 没有验证吗 我一直在尝试自己研究这个问题 但没有运气 我读过的所有文档都说这是在 css3 中进行渐变的正确原因 header color white font size 12px font family

随机推荐