Gulp 吞咽SASS-使用@import而不编译scss->;css
我知道这可能是个奇怪的问题,但请坚持我的观点。:) 是否可以使用gulp sass(或其他gulp插件)读取带有多个@import语句的单个.scss文件,并将所有这些@import ed文件导入/concat到一个未编译为CSS的.scss文件中 背景信息:我已经将引导和基本.scss文件合并到一个master.scss文件中。现在我想把@import语句中的所有文件都放到一个.scss文件中 我想到的另一个选择是只使用concat工具,但是我不需要手动指定gulp文件中要concat的每个文件吗?如果我错了,请纠正我 我正在寻找的示例:Gulp 吞咽SASS-使用@import而不编译scss->;css,gulp,gulp-sass,gulp-concat,Gulp,Gulp Sass,Gulp Concat,我知道这可能是个奇怪的问题,但请坚持我的观点。:) 是否可以使用gulp sass(或其他gulp插件)读取带有多个@import语句的单个.scss文件,并将所有这些@import ed文件导入/concat到一个未编译为CSS的.scss文件中 背景信息:我已经将引导和基本.scss文件合并到一个master.scss文件中。现在我想把@import语句中的所有文件都放到一个.scss文件中 我想到的另一个选择是只使用concat工具,但是我不需要手动指定gulp文件中要concat的每个文
//base.scss
@import foo;
@import bar;
进口
//foo.scss
$my-font-size:20px;
及
使
//final.scss
$my-font-size:20px;
body {
div {
font-size:$my-font-size;
}
}
请注意,
@import
s包含在final.scss
文件中,但是没有任何来自scss->CSS的编译。是的,您可以将gulp scss用于此或gulp ruby sass。现在有一些人已经喝了一段时间了
吞下sass以编译sass文件
gulp rename可重命名分发文件夹的文件
就我而言,我目前正在使用gulp scss。您可以简单地根据自己的需要运行任务,如下所示。在下面的示例中,base.scss将是包含所有@import语句的scss文件
var gulp = require('gulp'),
scss = require('gulp-scss'),
rename = require('gulp-rename');
gulp.task('sass', function () {
gulp.src('base.scss')
.pipe(scss())
.pipe(rename('final.scss'))
.pipe(gulp.dest('assets/css/'));
});
更新:
//base.scss
@import foo;
@import bar;
假设您已经创建了base.scs,并且该base.scs已经包含您的导入语句。上述方法应该有效。我们只需在提供的文件上运行scss任务,重命名它,然后将其移动到dest目录中
更新2
保留这些变量需要使用concat方法,因为所有sass插件都只用于将sass编译为css。您不需要指定所有文件。首先只需要变量,然后就可以为所有自定义sas运行glob。只需确保遵循下面数组中类似的文件夹结构,以便正确分离和组织资产
您也不必担心维护导入文件。不需要它,使用这种方法管理的工作量也会减少
var gulp = require('gulp'),
concat = require('gulp-concat');
var sassConcat = [
'sass/variables.scss',
'sass/modules/**/*.scss'
];
gulp.task('sass', function () {
gulp.src(sassConcat)
.pipe(concat('final.scss'))
.pipe(gulp.dest('../assets/sass/'));
};
我偶然发现了同样的问题。这个会帮助你的。虽然有一些缺陷(忘记带下划线前缀的文件名吧,这就是我现在发现的) 免责声明:我不会解释npm是如何工作的,我假设作者知道什么是npm包,如果他想使用gulp插件。请不要因为我没有不必要地明确描述什么是显而易见的,就删除我的答案 提出问题的人。 为了防止由于缺乏上下文而删除此答案,我引用了包描述 导入解析
在样式表中解析@import语句 这是做什么的
如果您有一些较少的文件或手写笔文件,您希望将它们粉碎成一个主文件,而无需编译为css,该怎么办?只要使用导入解决方案,你所有的梦想都会实现。所有@import语句都将被解析,剩下的一个文件将包含所有宝贵的混合、变量和声明 使用导入解析
npm install import-resolve
// some-node-thing.js
var importResolve = require('import-resolve');
// spits out a master dist file with all your wonderful stylesheet
// things concatenated
importResolve({
"ext": "less",
"pathToMain": "path/to/main.less",
"output": "path/to/output.less"
});
// if you don't specify an output file, output accepts a callback parameter
// and passes the concatenated file text
var output = importResolve({
"ext": "styl",
"pathToMain": "path/to/main.styl"
}, function (output) {
fs.writeFile('foo.styl', output, function (){
console.log('did it myself.');
});
});
抱歉,这没有达到我想要的效果。它没有导入标记为
@import
的文件。我将突出上面问题的关键部分,使其更加引人注目。奇怪。如果您将src设置为base.scss,其中包含您要导入的内容,它将把它们编译到您希望的任何目录中,所有这些内容都放在一个文件中。这就是我在构建系统中使用的东西。@AnthonyF。您是否正在尝试从包含导入的文件创建另一个导入文件?是的,仍然不适用于我。复制了您的任务,仅更改了源文件的名称,并将final.scss
更改为'final.scss'
,以使其正常工作。它只接受base.scss中的内容并将其放入final.scss。我觉得你可能不小心漏掉了一个步骤或什么,因为你的任务中没有实际的sass处理?它只接受一个源,重命名它,然后把它放在dest。@AnthonyF。我道歉!请查看更新的代码。我忘了运行sass任务。看起来不错。我现在无法测试这个软件包,因为我已经离开了,但它似乎做了我所期待的。我会把你的答案记为答案。谢谢。这就是我的解决方案。同时,我创建了pull请求,修复了无法访问带有下划线前缀的文件的问题。是的,我看到了。开源之美。谢谢