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

kh212irz  于 2022-12-16  发布在  Gulp
关注(0)|答案(1)|浏览(209)

我用gulp编译我的scss文件,直到我买了一台新的笔记本电脑,一切都正常,但是现在嵌套变量不能编译了。
例如,这些颜色都不能编译:

$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,所以很明显我使用了这两个包的不同版本。
以下是版本:
国家预防措施:8.5.0
gulp:CLI版本:2.3.0
本地版本:4.0.2
节点:v16.14.2
我的gulpfile看起来像这样(它处理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在新计算机上工作。
如果有人知道这里出了什么问题,那将是一个巨大的帮助!
谢谢!
吉尔

juzqafwq

juzqafwq1#

此问题是由 Bootstrap 节点模块版本的差异引起的。首次构建站点时,安装了 Bootstrap 版本4.3.1。在获取新的便携式计算机并重新安装所有节点模块后,安装了 Bootstrap 5.1。
不太清楚为什么 Bootstrap 会影响scss变量,所以如果你知道的话,请随时告诉我。
要更新引导版本号,请导航到包含node_modules的目录并运行npm install bootstrap@<version-number> --save

相关问题