编译多个项目

Question

我有多个 sass 主题和一个带有常用选项的通用文件夹，但文件应编译在每个主题 css 文件夹中。解释起来有点复杂。我想和你分享脚手架。我想用 grunt 编译它，但我不知道该怎么做

common_files
- sass
  - common_file.scss
theme_foo
- sass
  - file_one.scss
  - file_two.scss
- css
  - style.scss
theme_bar
- sass
  - file_one.scss
  - file_two.scss
- css
  - style.scss
Gruntfile.js

我想用它们自己的 sass 文件和 css 文件夹中的通用文件编译每个主题。

这是我的 Gruntfile.js

module.exports = function(grunt) {
  require('load-grunt-tasks')(grunt);
  require('time-grunt')(grunt);
  grunt.initConfig({
    watch: {
      sass: {
        files: ['sass/{,*/}*.{scss,sass}'],
        tasks: ['sass'],
      },
    },
    sass: {
      dist: {
        options: {
          style: 'expanded', // For compressed use 'compressed'
        },
        files: [{
          expand: true,
          cwd: 'sass',
          src: ['*.{scss,sass}'],
          dest: 'css',
          ext: '.css',
        },],
      },
    },
  })

  /* Load plugins  */

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-csslint');

  /* Tasks  */

  // Default task
  grunt.registerTask('default', [, 'watch']);

};

Answer 1

这是您问题的完整解决方案：

更新你的结构

├── project-dir
│   ├── common
│   │   ├── scss
│   │   │   ├── _button.scss
│   │   │   ├── _form.scss
│   │   │   ├── common.scss
│   ├── theme-foo
│   │   ├── scss
│   │   │   ├── _tag.scss
│   │   │   ├── _figure.scss
│   │   │   ├── theme-foo.scss
│   ├── theme-bar
│   │   ├── scss
│   │   │   ├── _tag.scss
│   │   │   ├── _figure.scss
│   │   │   ├── theme-bar.scss

使用每个文件夹的主 scss 文件（common、theme-foo、主题栏) to import all its files. And for theme files, import alsocommon.scss` 文件。

例如 : common.scss 文件 :

@import 'button.scss',
        'form.scss';

例如 : theme-foo.scss 文件 :

// import common style
@import 'common.scss';

// import theme style 
@import 'tag.scss',
        'form.scss';

现在你只需要用 grunt-contrib-sass.

theme-foo.scss

theme-bar.scss

例如 :

module.exports = function(grunt) {
    require('load-grunt-tasks')(grunt);
    grunt.initConfig({
        sass: {
            dist: {
                files: {
                    'project-dir/theme-foo/css/theme-foo.css': 'project-dir/**/theme-foo.scss',
                    'project-dir/theme-bar/css/theme-bar.css': 'project-dir/**/theme-bar.scss'
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-sass');
};

看看sass-guidelines and specially 7-1 pattern，学习很多好的做法。

编译多个项目

Compile multiple projects

sass

node.js

gruntjs