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

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

这是我的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 also common.scss`文件。

E.g ：common.scss档案：

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

E.g ：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。

E.g ：

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，特别是7-1 pattern，了解很多良好做法。

编译多个项目

1 个答案: