Question

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

是否可以使用gulp sass（或其他gulp插件）读取带有多个@import语句的单个.scss文件，并将所有这些@ import-ed文件导入/连接到单个.scss文件< / strong> 不编译为CSS？

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

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

我正在寻找的例子：

if($('.list li').hasClass('//aDynamicallyGeneratedClass')){ //Then do this with my object. });

进口

//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文件中，但没有来自SCSS的任何编译 - ＆gt; CSS。

Answer 1

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

the npm package that is build especially for this purpose

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

导入解决方案
  解决样式表中的@import语句

这是做什么
  如果您想要将一些较少的或手写笔文件粉碎成主文件，而不编译为css，该怎么办？只需使用import-resolve即可实现所有梦想。所有@import语句都将被解析，你将留下一个文件，其中包含所有宝贵的mixin，变量和声明。

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

<强>更新

假设您已经创建了已经包含import语句的base.scss。上述方法应该有效。我们只需在提供的文件上运行scss任务，重命名它，然后将其移动到dest目录中。

更新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/'));
};

Gulp SASS - 使用@import而不编译scss - ＆gt; CSS

2 个答案: