gulp-sass @import CSS 文件

Posted 2023-02-16

【中文标题】gulp-sass @import CSS 文件

【英文标题】：gulp-sass @import CSS file

【发布时间】：2015-02-27 22:30:03

【问题描述】：

使用 gulp-sass 我可以在 @import 'filepath.scss'; 中包含 .scss 文件

但是当我尝试使用@import 'filepath.css' 导入普通css 文件时，它只是将import url(filepath.css); 的导入行添加到输出css 文件中，而不是实际导入代码。

如何导入 CSS 文件和 SCSS 文件？我想这样做以包含来自 bower 的文件。

这是我的 gulp 函数：

// include gulp
var gulp = require('gulp');

// include deps
var minifyCSS  = require('gulp-minify-css'),
    autoprefix = require('gulp-autoprefixer'),
    rename     = require('gulp-rename'),
    sass       = require('gulp-sass');

var targets = 
    css: './output/css'
;

// compile CSS
gulp.task('sass', function() 

    gulp.src([
        './app/assets/scss/app.scss', 
        './app/assets/scss/app-admin.scss'
    ])
    .pipe(sass(
        includePaths: [
            './bower_components/bootstrap-sass-official/vendor/assets/stylesheets', 
            './bower_components'
        ],
        errLogToConsole: true
    ))

    .pipe(autoprefix('last 2 versions'))
    .pipe(gulp.dest(targets.css))
    .pipe(minifyCSS())
    .pipe(rename(function (path)  path.basename += '.min'; ))
    .pipe(gulp.dest(targets.css));
);

例如，我想包含相对于上面包含的 bower 目录位于 datatables/media/css/jquery.dataTables.css 的数据表。

所以在我的app.scss 文件中我有@import 'datatables/media/css/jquery.dataTables.css';

如果我不能使用 gulp-sass 来做到这一点，我还能怎么做？

【参考方案1】：

我知道这个问题已经有一个公认的答案，但是对于任何可能遇到这个问题的人，我建议使用gulp-importer。这个插件是高度可配置的并应用导入，不仅适用于 CSS 文件，而且适用于任何类型的文件。

除了其他选项外，该插件还允许自定义用于放置导入语句的正则表达式模式。因此，不用担心语法可能会中断。

试一试！ :)

【参考方案2】：

我只是将我的“filename.css”重命名为“filename.scss”并且 @import "文件名"; 没有文件扩展名。

【参考方案3】：

gulp-cssimport 是一个不错的选择，如果您还希望 css 导入在非缩小开发环境中工作。

【参考方案4】：

将一些参数传递给 minifyCSS 可以让我实现这一点。

.pipe(minifyCSS(
        relativeTo: './bower_components',
        processImport: true
    ))

来源：gulp-minify-css 取决于 clean-css，引用选项解释 here。

【讨论】：

gulp-minify-css 包现已弃用。这对我来说是个大问题，因为建议的替换 (gulp-cssnano) 不包含类似的功能。我最终做的是使用 PostCSS 并使用该包运行 autoprefixer 和 postcss-import，然后在这两个完成后运行 gulp-cssnano。结果是一样的，并且您没有使用已弃用的包。 @Ezra 仅供参考

@evanhuntley gulp-clean-css 支持 processImport 但现在我认为该选项只是称为“内联”，默认为“内联：['local']”，因此会自动导入 css 代码跨度>

【参考方案5】：

这通常可以通过简单地列出 html 文件中的所有文件来解决，如下所示：

<!-- 'vendor' styles -->
<link rel="stylesheet" href="datatables/media/css/jquery.dataTables.css"/>
<link rel="stylesheet" href="some/other/plugin.css"/>
<!-- refernce to the SCSS compilation output -->
<link rel="stylesheet" href="styles/main.css"/>

我想这将具有无法从 SCSS 文件引用“供应商”CSS 文件中定义的类的缺点，例如使用 @extend 指令（我没有必要这样做） .除此之外，我认为不能以这种方式完成它没有任何功能性原因，因为无法在 css 文件中定义变量、mixin 或其他可重用的样式块。

但是，许多人希望将 CSS 文件合并为一个 css 文件，原因有两个：

尽量减少需要加载的文件数量（= HTTP 请求的数量）将加快页面加载时间 使用 CSS 优化器（例如 csso）可以从一个单一的 CSS 文件中找到重叠部分，这样优化可能会更有效。

为了实现这一点，经常使用gulp-useref。为此，HTML 需要在样式表引用周围有特殊注释：

<!-- build:css styles/combined.css -->
<link rel="stylesheet" href="datatables/media/css/jquery.dataTables.css"/>
<link rel="stylesheet" href="some/other/plugin.css"/>
<link rel="stylesheet" href="styles/main.css"/>
<!-- endbuild -->

上面的神奇 cmets 指示 useref 将 cmets 之间引用的 CSS 文件连接到一个名为 styles/combined.css 的文件。当然，要做到这一点，您需要在 gulpfile 中说明 useref 的用法，如下所示：

var gulp = require('gulp'),
    useref = require('gulp-useref'),
    gulpif = require('gulp-if'),
    csso = require('gulp-csso');

gulp.task('html', function () 
    var assets = useref.assets();

    return gulp.src('app/*.html')
        .pipe(assets)
        .pipe(gulpif('*.css', csso()))
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest('dist'));
);

请注意，需要先编译 SCSS 文件才能使其正常工作。

这样做的一个原因是，在开发过程中，获得具有工作 CSS 的可查看 HTML 页面所需的处理时间被最小化。也就是说，在您对 SCSS 文件进行修改后，gulp 唯一需要做的就是编译 SCSS 文件才能显示更改，因为“神奇 cmets”之间的 CSS 引用会这样工作.如果您在保存后使用browserSync 查看更改，这将有助于最大程度地减少更改在浏览器中显示的延迟。只有“为生产而编译”才需要使用“gulp-useref”。

我建议查看一些Slush 或Yeoman 生成器，或者更确切地说是它们生成的代码。至少 Yeoman 生成器 'gulp-webapp' 似乎使用了 useref。即使您不想使用生成器，它们的输出也可以作为发现最佳实践的好方法书（假设所讨论的生成器制作精良）。