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

Posted 2023-02-16

【中文标题】Gulp SASS - 使用 @import 而不编译 scss -> css

【英文标题】：Gulp SASS - Use @import without compiling scss -> css

【发布时间】：2016-01-23 06:39:13

【问题描述】：

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

是否可以使用 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;
  

注意@imports 包含在final.scss 文件中，但没有从 SCSS -> CSS 进行任何编译。

【参考方案1】：

是的，您可以为此使用 gulp-scss 或 gulp-ruby-sass。现在有一些 Gulp 已经存在了一段时间了。

gulp-sass 编译 sass 文件 https://www.npmjs.com/package/gulp-sass

gulp-rename to 重命名分发文件夹的文件 https://www.npmjs.com/package/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，其中已经包含您的导入语句。上面的方法应该是有效的。我们只需在提供的文件上运行 scss 任务，重命名它，然后将其移动到您的目标目录中。

更新 2

保留变量将需要您使用 concat 方法，因为所有 sass 插件都只是用于将 sass 编译为 css。您无需指定所有文件。首先是变量，然后您可以为所有自定义 sass 运行 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/'));
;

【讨论】：

抱歉，这没有达到我想要的效果。它没有导入标记为@import 的文件。我将突出显示我上面问题的关键部分，以使其更加引人注目。

奇怪。如果您将 src 设置为 base.scss ，其中包含您要导入的内容，它会将它们编译到您希望全部放在一个文件中的任何目录中。这是我在构建系统中使用的。

@AnthonyF。您是否尝试从包含导入的文件创建另一个导入文件？

是的，仍然不适合我。复制了您的任务，仅更改了源文件的名称并将final.scss 更改为'final.scss' 以使其正常工作。它只取 base.scss 中的内容并将其放入 final.scss。我觉得您可能不小心遗漏了一步或其他内容，因为您的任务中没有发生实际的 sass 处理？它只需要一个源，重命名它，然后将它放在 dest。

@AnthonyF。我道歉！请查看更新后的代码。我忘了让 sass 任务运行。

【参考方案2】：

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

the npm package that is build especially for this purpose

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

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

这是做什么的 如果你有一些 less 或 stylus 文件，你想将它们组合成一个主文件，而不编译成 css 怎么办？只需使用 import-resolve，你所有的梦想都会成真。所有@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.');
    );
);

【讨论】：

看起来不错。自从我继续前进以来，我目前无法测试这个包，但它似乎确实符合我的要求。我会将您的答案标记为解决方案。

谢谢。这就是我的解决方案。同时，如果无法访问常规，我创建了带有下划线前缀的修复检查文件的拉取请求。

是的，我看到了。开源之美。谢谢！