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

Question

我知道这可能是一个奇怪的问题,但坚持我.:)

是否有可能使用一口青菜(或其他一饮而尽插件)来读取多个@import声明,和一个.scss文件导入/ Concat的所有@进口的文件以单一.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;
  }
}

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

Answer 1

我偶然发现了同样的问题。这个会对你有所帮助。虽然有一些缺陷（忘记带有下划线前缀的文件名 - 这就是我到目前为止发现的）。

专门为此目的构建的 npm 包

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

importresolve
解析样式表中的@import语句

这是做
什么的 如果您想将一些 less 或 stylus 文件合并到一个主文件中而不编译为 css，该怎么办？只需使用 import-resolve，你所有的梦想就会成真。所有 @import 语句都将被解析，您将留下一个文件，其中包含所有珍贵的 mixins、变量和声明。

使用导入解析

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