我用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在新计算机上工作。
如果有人知道这里出了什么问题,那将是一个巨大的帮助!
谢谢!
吉尔
1条答案
按热度按时间juzqafwq1#
此问题是由 Bootstrap 节点模块版本的差异引起的。首次构建站点时,安装了 Bootstrap 版本4.3.1。在获取新的便携式计算机并重新安装所有节点模块后,安装了 Bootstrap 5.1。
不太清楚为什么 Bootstrap 会影响scss变量,所以如果你知道的话,请随时告诉我。
要更新引导版本号,请导航到包含node_modules的目录并运行
npm install bootstrap@<version-number> --save