Gulp SASS - 在不编译 scss 的情况下使用 @import -> css

Question

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

是否有可能使用gulp sass(或其他gulp插件)读取单个。scss文件与多个@import语句，并导入/concat所有这些@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

我也碰到过同样的问题。这个会帮到你的。虽然有一些缺陷(忘记用下划线前缀的文件名-这是我发现直到现在)。

专门为此目的构建的NPM包

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

进口解决

解析样式表中的@import语句

如果您希望将一些less或stylus文件合并为一个主文件，而不编译为css，该怎么办?只要使用import-resolve，你所有的梦想都会成真。所有的@import语句都将被解析，你将留下一个包含所有宝贵的mixins、变量和声明的文件。

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

Answer 2

是的，您可以使用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/'));
});

更新:

假设你已经有了底数。已经创建了包含您的导入语句的SCSS。上述方法应该是有效的。我们只需在提供的文件上运行scss任务，重命名它，并将其移动到您的dest目录中。

更新2

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