标签: gulp-sass

我有一个相当大的代码库，其中包含多个共享通用 sass 模块的项目。

我还有一个非常复杂的 gulpfiles 设置，用于运行许多任务的每个模块。

我遇到的一个问题是在更新单个共享 sass 模块时能够在多个项目上运行 sass 任务。

例如：

Project 1 file.scss
   @import "shared-child.scss"

Project 2 file.scss
   @import "shared-child.scss"

Project 3 file.scss
       @import "shared-child.scss"

这种情况经常发生。当我更新shared-child.scss 时，我希望所有包含shared-child.scss 的项目文件都重新编译。

因此，当我在shared-child.scss上运行gulp sass 任务时，它会反过来知道它在各个项目（即项目 1、项目 2、项目 3）中的位置，并运行相应的 gulp 任务以包括对共享 child.scss。

就权利而言，我在项目 gulp.watching 中的所有包含文件中都有父文件进行更改，但反之亦然是问题所在。更新孩子并让父母重新编译。

任何有关如何实现这一点的信息将不胜感激。

你好,我是一个很新的人.问题是当我使用命令"gulp"scss文件运行默认任务时不要编译而是复制到css文件夹这是我的gulpfile.js

    var gulp = require('gulp');
    var sass = require('gulp-sass');
    var autoprefixer = require('gulp-autoprefixer');
    var browserSync = require('browser-sync');
    var runSequence = require('run-sequence');

    gulp.task('browserSync', function() {
        browserSync({
            server: {
                baseDir: 'app'
            }
        })
    })

    gulp.task('sass', function() {
        return gulp.src('app/scss/**/*.scss') 
        .pipe(autoprefixer({
            browsers: ['last 2 versions']
        }))
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.reload({
            stream: true
        }));
    })

    gulp.task('watch', function() {
        gulp.watch('app/scss/**/*.scss', ['sass']);
        gulp.watch('app/*.html', browserSync.reload); 
        gulp.watch('app/js/**/*.js', browserSync.reload); 
    })


    gulp.task('default', function(callback) {
        runSequence(['sass', 'browserSync', 'watch'],
            callback
        )
    })

目录树

     app
      |-scss
         |- styles.scss
         |- _layout.scss
         |- _homepage.scss
         |- _profile.scss
         |- …

我想将一个类.highlight应用于一堆不同的元素，并根据元素类型对它们进行样式设置。我可以这样做：

input[type="text"].highlight {...}
select.highlight {...}
someOtherSelector.hightlight {...}

但我正在尝试使用尾随符号 (&) 使我的代码更加简洁。

我尝试了以下方法：

.highlight {

    input[type="text"].& {
        border: 1px solid $brand-purple;
    }
}

但我收到以下错误：

错误：属性“输入”后必须跟一个“：”

我也试过：

.highlight {

    input[type="text"]& {
        border: 1px solid $brand-purple;
    }
}

但我收到以下错误：

"[type="text"]" 之后的无效 CSS: 预期为 "{", was "&" "&" 只能在复合选择器的开头使用。

有没有办法解决这个问题，或者这不能在 SASS 中完成？

这里可能有几个小的样式问题，但大多数情况下是有效的。但是，它似乎并没有监视styles/*.scss该文件夹中文件或新 SCSS 的更改。与 Javascript 相同：scripts/*.js不在手表上更新。

也可以在不破坏源映射的情况下结合 SCSS 和 CSS，但这并不重要。现在，只要让实时更新工作就好了。

const gulp = require('gulp')
const plumber = require('gulp-plumber')
const rename = require('gulp-rename')
const autoprefixer = require('gulp-autoprefixer')
const babel = require('gulp-babel')
const concat = require('gulp-concat')
const sass = require('gulp-sass')
const browserSync = require('browser-sync')
const clean = require('gulp-clean')
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
const minifycss = require('gulp-minify-css');

const gulpfn = require('gulp-fn')
const fs = require('fs');

const util = require('gulp-util');
let config = { production: !!util.env.production } …

我正在使用 bootstrap-sass。节点模块已安装。我应该期望我可以在任何 .scss 文件中使用以下行导入到适当的工作表中

@import 'bootstrap';

我的理解是编译器会爬行直到找到 package.json，跳入 node_modules 并找到合适的包。相反，我收到以下错误。

错误：未找到或无法读取要导入的文件：bootstrap

如果我用如下所示的完全限定路径替换我的导入，那么一切都会正常进行。

@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

我正在使用 gulp-sass 进行编译。猜测我只是关闭了一些小的配置位，但我无法弄清楚它是什么。

我有一个由组件组织的 SCSS 部分列表，我试图用 Gulp 单独编译这些组件，但不知道如何这样做。

这是我要编译的部分文件列表：

_header.scss
_button.scss
_navigation.scss

我想将这些文件输出到与

header.css
button.css
navigation.css

我正在使用gulp-sass以便将我所有的 SCSS 文件编译成一个文件，如下所示：

gulp.task('styles', function() {
  return gulp
    // Find all `.scss` files from the `stylesheets/` folder
    .src('./src/stylesheets/**/*.scss')
    // Run Sass on those files
    .pipe(sass({
      style: 'expanded',
    }).on('error', sass.logError))
    // Write the resulting CSS in the output folder
    .pipe(gulp.dest('build/stylesheets'))
});

有没有办法创建一个单独的 Gulp 任务，该任务将单独编译和输出目录中的每个文件，而不是最后将它们组合成一个文件？

提前致谢。

我想将所有scss文件合并为一个压缩css文件：

结构体：

• 样式表/
• • test.scss
• • test2.scss
• gulpfile.js

我尝试了这两个任务，可以在几个答案和教程中找到它们，但是我总是将scss文件复制到一个重复css文件中：

gulp.task('sass', function() {
    return gulp.src('stylesheets/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('css/'))
});

和

gulp.task('sass', function() {
    return gulp.src('stylesheets/**/*.scss')
      .pipe(sass())
      .pipe(gulp.dest('css/styles.css'))
});

!!! 效果！！！

• 样式表/
• • test.scss
• • test2.scss
• CSS /
• • test.css
• • test2.css
• gulpfile.js

或进行第二次尝试的任务：

• 样式表/
• • test.scss
• • test2.scss
• css / styles.css /
• • test.css
• • test2.css
• gulpfile.js

??? 预期结果 ？？？

• 样式表/
• • test.scss
• • test2.scss
• CSS /
• • styles.css
• gulpfile.js

有任何想法吗？

 Error: Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Unsupported runtime (93)
 For more information on which environments are supported please see:
 https://github.com/sass/node-sass/releases/tag/v4.14.1
at module.exports (/Users/hhag/Desktop/test_gulp/node_modules/node-sass/lib/binding.js:13:13)
at Object.<anonymous> (/Users/hhag/Desktop/test_gulp/node_modules/node-sass/lib/index.js:14:35)
at Module._compile (node:internal/modules/cjs/loader:1109:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
at Module.load (node:internal/modules/cjs/loader:989:32)
at Function.Module._load (node:internal/modules/cjs/loader:829:14)
at Module.require (node:internal/modules/cjs/loader:1013:19)
at require (node:internal/modules/cjs/helpers:93:18)
at Object.<anonymous> (/Users/hhag/Desktop/test_gulp/node_modules/gulp-sass/index.js:166:21)
at Module._compile (node:internal/modules/cjs/loader:1109:14)

当我开始使用 gulp 时会发生此错误。是否有将 gulp-sass 与 apple m1 一起使用的解决方案？谢谢

我有以下结构：

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 css\n\xe2\x94\x82\xc2\xa0\xc2\xa0  \xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 output.css\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 gulpfile.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 scss\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 some-other.css\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 _base.scss\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 _config.scss\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 _helpers.scss\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 _home.scss\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 main.scss\n

我正在使用 Gulp 将 CSS 和 SCSS 文件编译scss/为assets/css/. 这是我的相关任务gulpfile.js：

gulp.task(\'build-css\', function() {\n  return gulp.src([\'scss/**/*.scss\',\'scss/**/*.css\'])\n    .pipe(concat(\'output.css\'))\n    .pipe(sass())\n    .pipe(gulp.dest(\'assets/css\'));\n});\n

问题是我的 SCSS/SASS 部分文件（那些以下划线开头的文件scss/通过任务并最终失败。

我想忽略以scss/下划线开头并以.scss.

我已经查看了以下内容，但无法使其正常工作：

\n
• Gulp 不会忽略带有下划线的 SASS 部分
\n
• 如何使用 glob 忽略以下划线开头的文件？
\n

获得以下错误 return process.dlopen(module, path._makeLong(filename))

module.js:597
  return process.dlopen(module, path._makeLong(filename));
                 ^

Error: The specified procedure could not be found.
\\?\C:\SLIM_WORKSPACE\slim\slim-web\node_modules\gulp-sass\node_modules\node-sass\vendor\win32-x64\binding.node
    at Error (native)
    at Object.Module._extensions..node (module.js:597:18)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\SLIM_WORKSPACE\slim\slim-web\node_modules\gulp-sass\node_modules\node-sass\lib\index.js:211:15)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)