如何在多个文件夹上执行sass watch命令

时间:2016-05-15 08:22:40

标签: css sass

我有以下目录结构

src/
    sass/
        base.scss
        global.scss
    components/
        Menu/
            sass/
                styles.scss
        Contents/
            sass/
                style.scss

正如您所看到的,每个组件都有global个样式和样式。我现在正在做的是当我编辑global个样式然后我在全局样式文件夹上运行sass --watch sass:css时。当我编辑任何组件样式时,我在该组件的sass文件夹上运行sass --watch sass:css命令。

我需要运行sass --watch命令,以便编译我正在编辑的所有scss文件。 如何使这项工作?

2 个答案:

答案 0 :(得分:0)

首先我强烈建议使用Compass来编译scss文件。 使用它按照此链接中的步骤: Install Compass-style

安装后,在src文件夹中创建一个项目文件 的 config.rb 之后转到src文件夹然后运行:

compass watch

它将编译所有scss文件

你可以指定很多设置 config.rb的内容看起来应该是这样的

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:

http_path = "/"
css_dir = "../wwwroot/css"
sass_dir = "./"
images_dir = "/wwwroot/images"
cache_path = "c:/tempscss" 

您可以查看此链接以了解有关您可以配置的内容的更多信息 Compass Configuration

答案 1 :(得分:0)

你能考虑使用Gulp或Grunt等构建工具吗?它会让事情变得更容易。您可以使用通配符(例如'./src/sass/**/*.scss'['./src/components/scss/*.scss', './src/modules/**/*.scss']

)定位多个文件夹

gulp中的设置只是

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

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

gulp.task('watch',function() {
    gulp.watch('./src/sass/**/*.scss', ['styles']);
});

仅限npm,它可能如下所示:

"scripts": {
  "watch:sass": "onchange 'src/scss/**/*.scss' -- npm run sass:css",
}

在此处查找更多信息https://github.com/Qard/onchange