gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 07:52:40 27 4
gpt4 key购买 nike

我正在使用 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 跟踪错误“找不到或无法读取要导入的文件:网格”。

文档建议将所有必需的 .scss 文件包含在 gulp.dest() glob 中,我也这样做了:

// 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 的文件。

我该怎么做?我应该坚持导出每个文件吗?


编辑:我使用“loadPath”进行了几次尝试,但路径似乎是相对于 gulp-ruby-sass 文件夹而不是元素:

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

最佳答案

您需要使用 scss partials 命名约定,即以下划线 (_) 开头,这样您就可以告诉 Sass 文件不能自行编译。

将 grid.scss 重命名为 _grid.scss

styles.scss 保留,因为你希望它被编译。

导入为@import 'grid';

关于css - gulp-ruby-sass @import 同时编译一个独特的文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24750811/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com