12

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

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

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

这是我的吞咽功能：

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

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

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

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

4

5 回答 5

8

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

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

资料来源：
gulp-minify-css依赖于clean-css ，这里解释的引用选项。

于 2015-01-01T03:06:59.137 回答
7

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

于 2015-05-12T09:50:30.093 回答
0

很多时候，只需简单地列出 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 文件，原因有两个：

  1. 最小化需要加载的文件数量（= HTTP 请求的数量）将加快页面加载时间
  2. 使用 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 -->

上面的魔术注释指示 useref 将注释之间引用的 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 文件才能显示更改，因为“神奇注释”之间的 CSS 引用会这样工作. 如果您在保存后使用browserSync查看更改，这将有助于最大程度地减少更改在浏览器中显示的延迟。只有“为生产而编译”才需要使用“gulp-useref”。

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

于 2015-01-01T03:34:45.940 回答
0

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

于 2020-03-29T09:18:48.297 回答
0

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

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

试试看！:)

于 2021-09-21T21:36:23.897 回答