Question

我正在使用Gulp和gulp-ruby-sass来编译scss文件。该项目的文件夹如下所示：

css/
    scss/
        grid.scss
        styles.scss
    styles.css
node_modules/
    .bin/
        ...
    gulp/
        ...
    gulp-ruby-sass/
        ...
gulpfile.js
index.html

gulpfile.js：

// Load plugins
var gulp = require( 'gulp' ),
    sass = require( 'gulp-ruby-sass' );

// Styles
gulp.task( 'styles', function () {
  return gulp.src( 'css/scss/styles.scss' )
    .pipe( sass( { style : 'compressed' } ) )
    .pipe( gulp.dest( 'css/' ) );
});

CSS / SCSS / styles.scss：

@import 'grid';

css / styles.css跟踪错误＆＃34;要导入的文件未找到或不可读：grid＆＃34;。

文档建议在gulp.dest() glob中包含所有必需的.scss文件，所以我：

// Load plugins
var gulp = require( 'gulp' ),
    sass = require( 'gulp-ruby-sass' );

// Styles
gulp.task( 'styles', function () {
  return gulp.src( 'css/scss/*.scss' )
    .pipe( sass( { style : 'compressed' } ) )
    .pipe( gulp.dest( 'css/' ) );
});

现在完全正常，但每个.scss文件都会编译并导出为.css个文件，而我只想将styles.scss文件导出为styles.css。

我怎么能这样做？我应该坚持使用每个导出的文件吗？

编辑：我使用＆＃34; loadPath＆＃34;做了几次尝试。但路径似乎与gulp-ruby-sass文件夹相关，而不是项目：

/private/var/folders/tb/tlvf2ysj21x49qb1h3fgbjz00000gn/T/gulp-ruby-sass/

Answer 1

你需要使用scss partials命名约定，这是以下划线（_）开头，所以你告诉Sass文件不能自己编译。

将grid.scss重命名为_grid.scss

styles.scss保留，因为你想要它编译。</ p>

导入为@import 'grid';

gulp-ruby-sass @import在编译一个独特的文件时

1 个答案: