嵌套的 scss 变量未使用 gulp 编译

Question

我正在使用 gulp 编译我的 scss 文件。在我得到一台新笔记本电脑之前一切正常，但现在嵌套变量无法编译。

例如，none 这些颜色编译：

$theme-colors: (
  primary: #002d72,
  secondary: #53565a,
  purple: #4e2984,
  light-purple: rgba(78, 41, 132, .8),
  light-blue: #69b3e7,
  error: #d72f09
);

如何调用“主题颜色”的示例：

h3 {
  color: theme-color("primary");
}

我不得不重新安装 npm 和 gulp，所以我使用的这两个软件包的版本显然与以前不同。

以下是版本：

npm: 8.5.0
gulp: CLI 版本: 2.3.0
本地版本：4.0.2
节点：v16.14.2

我的 gulp 文件如下所示（它处理 scss 和 js 文件）：

/* file: gulpfile.js */
var gulp = require('gulp');
var sass = require('gulp-sass')(require('node-sass'));
const minify = require('gulp-minify');
var concat = require('gulp-concat');

gulp.task('sass', function(){
  return gulp.src('resources/assets/styles/**/*.scss')
    .pipe(sass()) // Using gulp-sass
    .pipe(gulp.dest('dist/styles'))
    .pipe(minify({
      ext: '.css',
      mangle: false,
      noSource: true
    }))
});

gulp.task('compress', function() {
   return gulp.src('resources/assets/scripts/*.js')
    .pipe(concat('main.js'))
    .pipe(minify({
      ext: '.js',
      mangle: false,
      noSource: true
     }))
    .pipe(gulp.dest('dist/scripts'));
});

gulp.task('watch', function() {
  gulp.watch('resources/assets/styles/**/*.scss', gulp.series('sass'));
  gulp.watch('resources/assets/scripts/**/*.js', gulp.series('compress'));
});

注意：我添加了 require('node-sass') 以使 gulp 在新计算机上工作。

如果有人知道这里出了什么问题，那将是一个巨大的帮助！

谢谢！

吉尔

Answer 1

此问题是由 bootstrap 节点模块版本中的差异引起的。首次构建站点时，它安装了 bootstrap 版本 4.3.1。在获得一台新笔记本电脑和 re-installing 所有节点模块后，安装了 bootstrap 5.1。

不太清楚为什么 bootstrap 会影响 scss 变量，所以如果您知道请随时赐教。

要更新 bootstrap 版本号，请导航到包含 node_modules 和运行、npm install bootstrap@<version-number> --save

的目录

嵌套的 scss 变量未使用 gulp 编译

Nested scss variables not compiling with gulp

sass

gulp

node-sass

gulp-sass