Question

我的项目样式以这种方式组织：

 styles/
       /1.less
       /2.less
       /..
       /style.less
       /style.css

在style.less中按顺序导入：

@import '1';
@import '2';
//..

示例中的

1.less包含html标记的属性，2.less包含属性对于body标签，3.less包含div标签的属性; 我希望输出应该是这样的：

html {
    /*this styles first*/
}

body {
    /*this styles second*/
}

div {
    /*this styles third*/
}

但是在编译后的style.css中，我得到了一个重复的样式属性：

html {
    /*this styles first*/
}
div {
     /*this styles third*/
}
html {
     /*this styles first*/
}
body {
     /*this styles second*/
}
div {
     /*this styles third*/
}
body {
     /*this styles second*/
}

构建系统 - Gulp和gulpfile.js看起来像这样：

'use strict';

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    concat = require('gulp-concat'),
    less = require('gulp-less'),
    csso = require('gulp-csso')

var path = {
    build: {
        css: 'styles/'
    },
    src: {
        style: 'styles/*.less'
    }
};
gulp.task('style:build', function () {
    gulp.src(path.src.style)
        .pipe(less())
        .pipe(concat('style.css'))
        .pipe(gulp.dest(path.build.css))
});
gulp.task('build', [
    'style:build'
]);
gulp.task('default', ['build']);
gulp.task('watch', function(){
  gulp.watch(path.src.style, ['build']);
});

在我看来，错误在于gulpfile.js。

Answer 1

与georg已经发布一样，css文件的连接通常以我们将所有较少的文件导入main less文件的方式使用，然后将其提供给gulp以创建css文件。所以使用这个：

var path = {
  build: {
    css: 'styles/'
  },
  src: {
    style: 'styles/style.less'
  }
};

或者如果您想使用gulp中的所有文件进行连接，请从main less文件中删除@import。

gulpfile.js错误地编译了css

1 个答案: