[英]How to compile a .scss file that imports other .scss into one master css file using gulp
I am attempting to compile a .scss file that is dependent on other .scss files into a single .css file using gulp. 我正在尝试使用gulp将依赖于其他.scss文件的.scss文件编译为单个.css文件。
What I am currently working with is a directory similar to the generalized directory below. 我目前正在使用的目录类似于下面的通用目录。 In the directory below, the global.scss file imports file1.scss, file2.scss, and file3.scss.
在下面的目录中,global.scss文件导入file1.scss,file2.scss和file3.scss。
sass
|
|-file1.scss
|-file2.scss
|-file3.scss
|-global.scss
I was hoping that the gulp-sass task I wrote would see the imports and recognize the dependencies that this global.scss file had and compile everything accordingly. 我希望我编写的gulp-sass任务能够看到导入并识别此global.scss文件具有的依赖项,并相应地编译所有内容。 Here is the gulp.task I wrote:
这是我写的gulp.task:
gulp.task('global-styling', function() {
gulp.src('src/resources/sass/global.scss')
.pipe(sass().on('error', sass.logError()))
.pipe(gulp.dest('dist/css/global.css'));
});
This error is thrown because the variables from the files that global.scss is dependent upon never got compiled or even noticed. 引发此错误是因为global.scss所依赖的文件中的变量从未被编译甚至未被注意到。
events.js:160
throw er; // Unhandled 'error' event
^
Error: src/resources/sass/global.scss
Error: Undefined variable: "$light-font".
on line 110 of src/resources/sass/global.scss
>> color: $light-font;
-----------^
If you haven't figured it out by now, I need to figure out how to write a gulp task that will create a single global.css file in my dist folder from the global.scss and its dependencies. 如果您现在还没有弄清楚,我需要弄清楚如何编写一个gulp任务,该任务将从global.scss及其依赖项在我的dist文件夹中创建一个global.css文件。 Could someone please shed some light on how this is done using gulp.
有人可以说明一下使用gulp是如何完成的。
If you import
everything in global.scss
you shouldn't any have problems. 如果
import
所有内容import
global.scss
,则应该没有任何问题。 I see an error in your sass.logError()
, it's without ()
, also to gulp.dest
you need to pass a folder path: .pipe(gulp.dest('dist/css/'));
我在您的
sass.logError()
看到一个错误,它没有()
,对于gulp.dest
也需要传递一个文件夹路径: .pipe(gulp.dest('dist/css/'));
and it will create a file called global.css
inside dist/css
. 它将在
dist/css
内创建一个名为global.css
的文件。 Here is a working example: 这是一个工作示例:
gulpfile.js gulpfile.js
const sass = require('gulp-sass');
const gulp = require('gulp');
gulp.task('global-styling', function() {
gulp
.src('./scss/base.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('dist/css'));
});
scss/global.scss scss / global.scss
@import 'var';
body {
background-color: $light-font;
}
scss/var.scss scss / var.scss
$light-font: blue;
Output in dist/css/global.css 在dist / css / global.css中输出
body {
background-color: blue; }
gulpfile.js EDIT: with gulp-rename gulpfile.js编辑:用gulp重命名
const sass = require('gulp-sass');
const gulp = require('gulp');
const rename = require('gulp-rename');
gulp.task('global-styling', function() {
gulp
.src('./scss/base.scss')
.pipe(sass().on('error', sass.logError))
.pipe(rename('name.css'))
.pipe(gulp.dest('dist/css'));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.