javascript gulp-sass @import CSS 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27727803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
gulp-sass @import CSS file
提问by Nicekiwi
Using gulp-sass I can include .scss files with @import 'filepath.scss';
使用 gulp-sass 我可以包含 .scss 文件 @import 'filepath.scss';
But when I try to import normal css files with @import 'filepath.css', It just added the import line of import url(filepath.css);to the output css file, rather than actually importing the code.
但是当我尝试使用 导入普通 css 文件时@import 'filepath.css'，它只是将 的导入行添加import url(filepath.css);到输出 css 文件中，而不是实际导入代码。
How can I import CSS files as well as SCSS files? I want to do this to include files form bower.
如何导入 CSS 文件和 SCSS 文件？我想这样做以包含文件形式的 bower。
Here is my gulp function:
这是我的吞咽功能：
// 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));
});
For instance I want to include datatables which is at datatables/media/css/jquery.dataTables.cssrelative to the bower directory as included above.
例如，我想datatables/media/css/jquery.dataTables.css包含与上面包含的 bower 目录相关的数据表。
So in my app.scssfile I have @import 'datatables/media/css/jquery.dataTables.css';
所以在我的app.scss文件中我有@import 'datatables/media/css/jquery.dataTables.css';
If I can't use gulp-sass to do this, how else could I do it?
如果我不能使用 gulp-sass 来做到这一点，我还能怎么做？
采纳答案by Nicekiwi
Passing some parameters to minifyCSS allows me to achieve this.
将一些参数传递给 minifyCSS 允许我实现这一点。
.pipe(minifyCSS({
relativeTo: './bower_components',
processImport: true
}))
Sources:
gulp-minify-cssdepends on clean-css, referenced options explained here.
来源：
gulp-minify-css依赖于clean-css，这里解释了引用的选项。
回答by Alp
gulp-cssimportis a good choice if you also want css imports to work in non-minified development environments.
如果您还希望 css 导入在非缩小的开发环境中工作，则gulp-cssimport是一个不错的选择。
回答by Vardmev
i just rename my "filename.css" to "filename.scss" and @import "filename"; without file extension.
我只是将我的“filename.css”重命名为“filename.scss”和@import“filename”；没有文件扩展名。
回答by Kalle Bj?rklid
Quite often this is solved simply by listing all the files in the HTML file like so:
通常，这可以通过简单地列出 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"/>
I suppose this will have the downside of not being able to refernce to the classes defined in the 'vendor' CSS files from the SCSS files for example with @extenddirective (I haven't had the need to do so). Other than that, I don't think there's any functional reason why it could not be done this way since it is not possible to define variables, mixins or other reusable blocks of style in the css files.
我想这将有一个缺点，即无法从 SCSS 文件中引用“供应商”CSS 文件中定义的类，例如使用@extend指令（我没有需要这样做）。除此之外，我认为没有任何功能原因不能以这种方式完成，因为不可能在 css 文件中定义变量、mixin 或其他可重用的样式块。
However, many want to combine the CSS files into one css file because of two reasons:
但是，许多人希望将 CSS 文件合并为一个 css 文件，原因有两个：
- Minimizing the amount of files needed to load (=the amount of HTTP requests) will speed up the page loading time
- Using a css opitmiser (such as csso) can find overlaps from the one monolithic CSS file and this the omptimization might be more efficient.
- 最小化需要加载的文件数量（=HTTP 请求数量）将加快页面加载时间
- 使用 css 优化器（例如csso）可以从一个整体的 CSS 文件中找到重叠，这可能会更有效。
To achieve this, gulp-userefis often used. To do so, the HTML needs to have special coments surrounding the stylesheets references:
为此，经常使用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 -->
The magic comments above instruct useref to concatenate the CSS files referenced between the comments to a file named styles/combined.css. Of course, for this to happen, you'll need to instruct the usage of useref in your gulpfile, something like this:
上面的魔术注释指示 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'));
});
Note that the SCSS files need to be compiled first for this to work.
请注意，需要首先编译 SCSS 文件才能使其工作。
One of the reasons of doing it this way is that the processing time required to get a viewable HTML page with working CSS when developing is minimized. That is, after you've made modifications to your SCSS files, the only thing that gulp needs to do to be able to display the changes is to compile the SCSS files, as the CSS references between the 'magical comments' will work as such. If you use browserSyncto view the changes after save, this will help minimize the lag for the changes to be displayed in your browser(s). Only 'compiling for production' you need to use 'gulp-useref'.
这样做的原因之一是在开发时获得具有工作 CSS 的可查看 HTML 页面所需的处理时间被最小化。也就是说，在您对 SCSS 文件进行修改后，gulp 唯一需要做的就是编译 SCSS 文件，因为“神奇注释”之间的 CSS 引用将如此工作. 如果您在保存后使用browserSync查看更改，这将有助于最大程度地减少在浏览器中显示更改的延迟。只有“编译生产”需要使用“gulp-useref”。
I recommend taking a look at some of the Slushor Yeomangenerators, or rather the code they generate. At least the Yeoman generator 'gulp-webapp' seems to use useref. Even if you don't want to use the generators, their output serves as a good recipe book for discovering best practices (assuming the generator in question is well made).
我建议查看一些Slush或Yeoman生成器，或者更确切地说是它们生成的代码。至少 Yeoman 生成器 ' gulp -webapp' 似乎使用了 useref。即使您不想使用生成器，它们的输出也可以作为发现最佳实践的好食谱（假设所讨论的生成器制作精良）。
