我试图将一组scss文件编译成一个css文件。例如,下面是我的文件夹结构:
theme
- assets
- src
- sass
- config
- _grid-system.scss
- _variables.scss
- _client-styles.scss
- _typography.scss
- styles.scss
根据上面的内容,我希望将_client-styles.scss
和_typography.scss
编译成一个css文件。这个新的CSS文件将位于同一个文件夹中,名为core.css(位于sass
文件夹下)。
我设置了gulpfile.js
,它将所有.scss
文件编译到同一个文件夹中的css中。但是不知道如何处理这个转换,因为我想忽略styles.scss
文件。
当前gulpfile.js
:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('autoprefixer');
var postcss = require('gulp-postcss');
var paths = {
styles: {
src: 'modules/**/*.scss',
dest: 'modules'
}
}
function scss() {
return gulp.src(paths.styles.src)
.pipe(sass().on('error', sass.logError))
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest(paths.styles.dest));
}
exports.scss = scss
function watch() {
scss();
gulp.watch(paths.styles.src, scss);
}
exports.watch = watch
styles.scss
的外观(供参考):
@import "config/**.scss";
@import "client-styles.scss";
@import "typography.scss";
我该怎么做?将'_client-styles.scss'和'_typography.scss'文件编译到'core.css'中,该文件将位于sass
文件夹下:
主题-资产-源- sass -配置- _网格系统.scss - _变量.scss - _客户端样式.scss - _排版.scss -样式. scss -核心. css(此处为新文件)
1条答案
按热度按时间9jyewag01#
您可以创建一个
core.scss
文件,在其中导入子文件夹中的所有sass文件,如下所示:使用gulp-sass-glob,您可以通过以下方式将其传输到
gulpfile.js
中: