Gulp SASS - 使用 @import 而不编译 scss -> css

Question

我知道这可能是一个奇怪的问题，但请坚持下去。 :)

是否可以使用 gulp sass(或其他 gulp 插件)读取带有多个 @import 语句的单个 .scss 文件，以及 将所有这些 @import-ed 文件导入/连接到单个 .scss 文件 即 不是 编译成CSS？

背景信息:我采用了 Bootstrap 和 FontAwesome 基础 .scss 文件，并将它们组合成一个主 .scss 文件。我现在想将 @import 语句中的所有文件放入一个 .scss 文件中。

我想到的另一个选择是只使用 concat 工具，但是我是否不必手动指定要在 gulp 文件中连接的每个文件？如果我错了，请纠正我。

我正在寻找的示例:

//base.scss
@import foo;
@import bar;

进口

//foo.scss
$my-font-size:20px;

和

//bar.scss
body {
  div {
    font-size:$my-font-size;
  }
}

使

//final.scss
$my-font-size:20px;
body {
  div {
    font-size:$my-font-size;
  }
}

请注意 @import s 包含在 final.scss 中文件，但没有任何来自 SCSS -> CSS 的编译。

Answer 1

我偶然发现了同样的问题。这将帮助你。虽然有一些缺陷(忘记带下划线前缀的文件名 - 这就是我现在发现的)。

the npm package that is build especially for this purpose

免责声明:我不会解释 npm 是如何工作的，如果作者想使用 gulp 插件，我假设作者知道 npm 包是什么。请不要仅仅因为我没有不必要地明确描述什么是显而易见的就删除我的答案
提出问题的人。
为了防止由于缺乏上下文而删除此答案，我引用了包描述。

import resolve
resolve @import statements in stylesheets

What this does
What if you have some less or stylus files that you want to smash together into a master file, without compiling to css? Just use import-resolve and all your dreams will come true. All @import statements will be resolved and you'll be left with one file containing all your precious mixins, variables and declarations.

Using import-resolve

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.');
    });
});