标签: gulp-sass

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

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

如何导入CSS文件以及SCSS文件？我想这样做包括文件形式凉亭.

这是我的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));
});

例如,我想包括datatables/media/css/jquery.dataTables.css相对于上面包含的凉亭目录的数据表.

所以在我的app.scss …

styles我的gulpfile中有一个任务:

gulp.task('styles', function () {
  var sass = require('gulp-ruby-sass');
  var autoprefixer = require('gulp-autoprefixer');
    return gulp.src('app/styles/main.scss')
    .pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
    .on('error', function (err) { console.log(err.message); })
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(gulp.dest('.tmp/styles'));
});

在控制台中生成这个:

[14:25:21] Starting 'styles'...
[14:25:21] gulp-ruby-sass: stderr: DEPRECATION WARNING: Passing --sourcemap without a value is    deprecated.
Sourcemaps are now generated by default, so this flag has no effect.
[14:25:21] gulp-ruby-sass: directory
[14:25:25] gulp-ruby-sass: write main.css
  write main.css.map

  events.js:72
    throw er; // Unhandled 'error' event …

我在编译SASS文件时遇到问题,现在将它们拆分出来并导入我在主scss文件中需要的文件.

我有一个样式文件夹,其中包含:

main.scss

top_menu.scss

我在main.scss中添加了一些导入:

@import 'font-awesome';
@import 'bootstrap';
@import 'custom_bootstrap';    
@import 'top_menu';

我的gulp-sass任务看起来像这样

gulp.task('compile_sass', ['compile_bower_sass'], function () {
  return gulp.src(paths.scss_files, {base:'src'})
    .pipe(gulp.dest(paths.dist))
    .on('error', gutil.log)
    .pipe(sass().on('error', sass.logError))
    .pipe(minifycss({
      keepSpecialComments: false,
      removeEmpty: true
    }))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest(paths.dist))
});

paths.scss_files变量设置为:

scss_files: './src/assets/styles/**/*.scss'

任务运行时,我收到一个错误:

要导入的文件未找到或不可读:top_menu

我实际上希望能够将我的scss分成单独的相关子文件夹然后使用@import:'navigation\top_menu'有点儿.

为什么会出现这个错误？

谢谢

编辑:

compile_bower_sass任务编译了一些其他scss文件(font-awesome,bootstrap,custom_bootstrap),这些文件是我在main.scss上的@import行中可以看到的.

当运行compile_sass任务并观察output(dist)文件夹时,我看到css文件是从compile_bower_sass任务生成的(所以font-awesome.css,bootstrap.css,custom_bootstrap.min.css).我注意到top_menu.scss文件也被复制了,但是没有被编译,所以我猜这就是错误发生的原因.

我是否需要在我的任务中指定一个订单,所以我可以确保它最后编译main.scss以确保任何所需的文件(例如我的自定义top_menu.scss)首先编译并可供我的主文件访问吗？

编辑2

好的,所以我认为我的想法归结为编译的顺序是正确的.

如果我更改我的scss_files变量以显式设置顺序,那么它们会被传送到gulp-sass(这次我进一步组织成文件夹)

scss_files:          ['./src/assets/styles/custom_bootstrap.scss',
                        './src/assets/styles/navigation/top_menu.scss',
                        './src/assets/styles/navigation/user_toolbar.scss',
                        './src/assets/styles/main.scss']

现在我原来的compile-sass任务按原样运行.

所以,我的下一个问题是如何配置gulp-sass以便我可以确保我的main.scss文件最后编译？或者我是否会以错误的方式解决这个问题？

编辑3:

在第一次提出这个问题时,我应该添加这些额外的任务配置.因此,compile_sass任务需要首先运行compile_bower_sass.

    /*-BOWER PACKAGEs INCLUSION --------------------------------------------*/
    gulp.task('compile_bower_sass', ['compile_bower_css'], function(){
      var sassFiles = mainBowerFiles('**/*.scss');
      return gulp.src(sassFiles)
        .pipe(rename(function(path){
          path.basename = path.basename.replace(/^_/, '');
          return …

问题:我正在使用gulp-sass并且想要定义一个load_path,这样我就不必拥有真正长的@import规则voor bower依赖关系,例如

@import "normalize"

代替

@import "../../../../../bower_components/bootstrap-sass/assets/stylesheets/bootstrap/normalize"

当使用gulp-sass使用LibSass引擎处理sass文件时,我实现这一目标的最佳方法是什么？

我正在尝试使用Gulp,Sublime Text 3和Chrome使用Livereload,但由于某种原因它不起作用.这就是我做的.

1. 在Chrome中安装了Livereload扩展程序.
2. 已安装gulp-livereload.
3. 设置gulpfile.js.
4. 跑了一口气.

我在这里错过了什么？我是否需要为Sublime Text 3安装Livereload插件？

仅供参考 - Chrome中Livereload扩展程序中的"选项"按钮显示为灰色.

我的Gulpfile:

var gulp = require('gulp');?       
var scssPlugin = require('gulp-sass');
var livereload = require('gulp-livereload');

gulp.task('myStyles', function () {
    gulp.src('sass/*.scss')
        .pipe(scssPlugin())
        .pipe(gulp.dest('css'))
       .pipe(livereload());
});

gulp.task('watchMyStyles', function() {
    livereload.listen();
    gulp.watch('sass/*.scss', ['myStyles']);
});

gulp.task('default', ['watchMyStyles']);  

包文件:

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-livereload": "^3.8.0",
    "gulp-sass": "^2.0.4"
  }
}

我有这个gulpfile.js文件:

var gulp = require('gulp'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
browserSync = require('browser-sync').create();

gulp.task('sass', function() {
    gulp.src('assets/src/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('assets/dist/css'))
    .pipe(browserSync.stream());
});

gulp.task('scripts', function() {
    gulp.src('assets/src/js/*.js')
    .pipe(concat('main.js'))
    .pipe(uglify())
    .pipe(gulp.dest('assets/dist/js'));
}); 

gulp.task('server', ['sass','scripts'], function() {
    browserSync.init({
        proxy: 'http://localhost/example/',
    });
    gulp.watch('assets/src/sass/*.scss', ['sass']);
    gulp.watch('assets/src/js/*.js', ['scripts']);
    gulp.watch('./**/*.php').on('change', browserSync.reload);
});

gulp.task('server', ['run']);

请告诉我有什么区别:

.pipe(browserSync.stream());

和:

gulp.watch('./**/*.php').on('change', browserSync.reload);

我需要他们两个？他们有不同的角色？

谢谢.

Gulp-sass 最近更新到 5.0 版。他们描述它不再包含编译器，他们说您必须单独安装。

他们有关于如何让 gulp-sass 要求编译器使用这段代码的文档。

var sass = require('gulp-sass')(require('sass'));

但是我使用了import()而不是，require()我不知道如何将他们提供的代码翻译require()成import().

这也是我得到的错误：

Error in plugin "gulp-sass"
Message:

gulp-sass 5 does not have a default Sass compiler; please set one yourself. 
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

  var sass = require('gulp-sass')(require('sass'));

现在我回滚到包含编译器的 4.1.1 版，但我想在某个时候将其更新到 5.0 版。

我正在努力争取编译一些sass,但是我似乎无法写出任何东西.我没有看到错误,使用sass编译自己是成功的.这是我的配置的样子:

var sass = require('gulp-sass');
var baseOutputDir = '../publish/homepage';
var cssOutputDir = baseOutputDir + '/css';
gulp.task('sass', function () {
    gulp.src(['./css-lib/Bootstrap/3.3.1/assets/stylesheets/_bootstrap.scss'])
        .pipe(sass())
        .on('error', function (err) { console.log(err.message); })
        .pipe(gulp.dest(cssOutputDir));
})

引导程序是https://github.com/twbs/bootstrap-sass的克隆

我试图将我的所有样式(css,scss)文件合并到一个文件中并进行编译.原因是因为存在基于另一个文件中的变量的文件,但现在我无法创建源图.

我究竟做错了什么？有更好的解决方案吗？

const gulp = require('gulp');
const debug = require('gulp-debug');
const sass = require('gulp-sass');
const concat = require('gulp-concat');  
const uglify = require('gulp-uglify');  
const csso = require('gulp-csso');
const autoprefixer = require('gulp-autoprefixer');
const addsrc = require('gulp-add-src');
const sourcemaps = require('gulp-sourcemaps');
const ngmin = require('gulp-ngmin');
const browserSync = require('browser-sync');

gulp.task('default', ['browser-sync'], function(){
    gulp.watch('app/**/*.scss', ['styles']);
    gulp.watch('app/**/*.js', ['app-scripts']);
    gulp.watch('app/components/**/*.html', ['components-html']);
    gulp.watch('app/views/**/*.html', ['view-html']);
    gulp.watch('app/index.html', ['copy-index-html']);
    gulp.watch('app/json/**/*.json', ['copy-jsons']);
});

gulp.task('styles', () => 
    gulp.src([
        'app/style/vendors/*.css',
        'app/style/utils/*.scss',
        'app/style/base/*.scss',
        'app/style/layout/*.scss',
        'app/components/**/*.scss',
        'app/views/**/*.scss'
    ])
    .pipe(concat('styles.scss'))
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(csso())
    .pipe(concat('styles.min.css'))
    .pipe(gulp.dest('dist/style'))
); …

npm ERR! code EBADPLATFORM

npm ERR! notsup Unsupported platform for inotify@1.4.2: wanted {"os":"linux","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! notsup Valid OS:    linux

npm ERR! notsup Valid Arch:  any

npm ERR! notsup Actual OS:   win32

npm ERR! notsup Actual Arch: x64

npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\lenovo\AppData\Roaming\npm-cache\_logs\2018-11-14T06_22_08_427Z-debug.log