0

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

 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。

4

1 回答 1

1

就像georg已经发布的一样，css文件的连接通常用于我们将所有less文件导入主要的less文件，然后将其提供给gulp以创建css文件。所以使用这个：

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

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

于 2016-03-24T10:41:50.927 回答