Question

我的所有scss都在<project-path>/styles父文件夹下。 / styles //等中有更多文件夹，每个文件夹和子文件夹也包含scss文件。我想通过grunt任务编译所有内容。问题是我没有css的公共输出文件夹，所有编译的css文件应该保留在相同的源文件夹中。我怎么做这个咕噜声。我遇到了这个

files: [
                {
                    expand: true,
                    cwd: "styles",
                    src: ["**/*.sass"],
                    dest: "styles",
                    ext: ".css"
                }
            ]

它会起作用吗？

Answer 1

我能够通过此配置获得所需的结果。所以是这是可能的。

sass: {
    dist: {
        files: [{
            expand: true,
            cwd: 'styles',
            src: ['**/*.scss'],
            dest: 'styles',
            ext: '.css'
        }]
    }
}

Answer 2

我在网上搜索，似乎 Grunt 可能不能够做到这一点。所以我尝试了 Gulp 。

1.创建 Gulpfile.js

var gulp = require('gulp'),
sass = require('gulp-sass'),
sassPath = 'yourCssFolder/**/*.scss';

gulp.task('CompileSass', function() {
    gulp.src(sassPath)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(function(f) {
            return f.base;
        }))
});

gulp.task('default', function () {
    gulp.watch(sassPath, ['CompileSass']);
});

2.创建 package.json

{
  "version": "1.0.0",
  "name": "GulpSass",
  "private": true,
  "devDependencies": {
    "gulp": "*",
    "gulp-sass": "*"
  }
}

3.使用 package.json 安装依赖项，然后运行 Gulp 。

（1）使用与 package.json

相同的文件夹打开命令行

（2）运行 npm install

（3）运行 gulp

Here是整篇文章。请检查＆＃34; 自动化Sass / Less编译＆＃34;部分。

grunt-sass递归编译在同一目录中

2 个答案: