使用gulp-sass,我可以将.scss文件包含在@import 'filepath.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';
如果我不能用吞咽口水来做这件事,我还能怎么做呢?
5条答案
按热度按时间z18hc3ub1#
通过向minifyCSS传递一些参数,我可以实现这一点。
来源:
gulp-minify-css取决于clean-css,此处说明了引用选项
pdkcd3nj2#
如果您还希望css导入在非小型开发环境中工作,gulp-cssimport是一个很好的选择。
a11xaf1n3#
通常,只需在HTML文件中列出所有文件即可解决此问题,如下所示:
我想这将有一个缺点,即无法从SCSS文件引用“供应商”CSS文件中定义的类,例如使用
@extend
指令(我没有必要这样做)。除此之外,我不认为有任何功能上的原因为什么不能这样做,因为它是不可能定义变量的,例如CSS文件中的样式、mixin或其它可重用的样式块。但是,许多人希望将CSS文件合并到一个css文件中,原因有两个:
1.最小化需要加载的文件数量(= HTTP请求数量)将加快页面加载时间
1.使用css opitmiser(如csso)可以从一个单一的CSS文件中找到重叠部分,这样优化可能会更有效。
为了实现这一点,通常使用gulp-useref。为此,HTML需要在样式表引用周围有特殊的注解:
上面的神奇注解指示useref将注解之间引用的CSS文件连接到名为
styles/combined.css
的文件中。当然,要实现这一点,您需要在gulpfile中指示useref的用法,如下所示:请注意,需要先编译SCSS文件才能使其正常工作。
这样做的一个原因是,在开发时,获得一个带有CSS的可查看HTML页面所需的处理时间被最小化了,也就是说,在对SCSS文件进行修改之后,gulp要显示更改所需做的唯一事情就是编译SCSS文件,如果你在保存后使用browserSync来查看修改,这将有助于最小化在浏览器中显示更改的延迟。只有“为生产而编译”才需要使用“gulp-useref”。
我建议你看一下Slush或Yeoman生成器,或者说它们生成的代码。至少Yeoman生成器'gulp-webapp'似乎使用了useref。即使你不想使用这些生成器,它们的输出也可以作为一本很好的食谱来发现最佳实践(假设所讨论的生成器制作得很好)。
syqv5f0l4#
我只是将我的“文件名. css”重命名为“文件名.scss”和@导入“文件名”;没有文件扩展名。
rjzwgtxy5#
我知道这个问题已经有了一个公认的答案,但是,对于任何可能遇到这个问题的人,我建议使用gulp-importer。这个插件是高度可配置的,并适用于导入,不仅是CSS文件,但任何类型的文件。
除了其他选项外,插件还允许自定义用于放置导入语句的正则表达式模式。因此,不必担心语法可能会出错。
给予看吧!:)