gulp-sass @import CSS file

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

但是当我尝试用@import 'filepath.css'导入普通的css文件时，它只是将import url(filepath.css);的导入行添加到输出的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));
});

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

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

如果我不能用嚕噜咕噜来做这件事，我还能怎么做？

传递一些参数来缩小CSS可以让我实现这一点。

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

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

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

通常，

只需列出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 文件中定义变量、mixins 或其他可重用的样式块。

但是，由于两个原因，许多人希望将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 -->

上面的魔术注释指示 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。即使您不想使用生成器，它们的输出也可以作为发现最佳实践的良好配方书（假设有问题的生成器制作精良）。

我只是将我的"文件名.css"重命名为"文件名.scss"，然后 @import"文件名";没有文件扩展名。

我知道

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

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

试一试！:)

相关内容

最新更新

热门标签：