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

安东尼F.

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

是否可以使用gulp sass(或其他gulp插件)读取具有多个@import语句的单个.scss文件,并将所有这些@ import-ed文件导入/合并编译为CSS的单个.scss文件

背景信息:我已经获取了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没有任何编译。

entio

我偶然发现了同样的问题。这将帮助您。尽管存在一些缺陷(忘记带下划线前缀的文件名-这是我到目前为止发现的东西)。

为此专门构建的npm软件包

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

导入resolve
解析样式表中的@import语句

这有
什么用,如果您想将一些较少或手写笔的文件粉碎成一个主文件而不编译为CSS,该怎么办?只需使用import-resolve,您的所有梦想就会实现。所有@import语句都会得到解决,您将得到一个包含所有宝贵的mixin,变量和声明的文件。

使用导入解析

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章