Gruntjs 能够使sass组件具有单独的输出css文件

我用以下结构设置了Drupal子主题：

├── scss
│   ├── _helpers.scss
│   ├── component
│   │   ├── _dashboard.scss
│   │   ├── _alert.scss
│   │   ├── _badge.scss
│   │   ├── _branding.scss
│   │   ├── _navbar.scss
│   │   └── _user-login-form.scss
│   ├── element
│   │   ├── _header.scss
│   │   └── _main.scss
│   ├── styles.scss

这是我的Grunfile.js：

module.exports = function(grunt) {
  "use strict";
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    watch: {
      css: {
        files: '**/*.scss',
        tasks: ['sass']
      },
      scripts: {
        files: ['js/src/*.js'],
        tasks: ['jshint', 'concat', 'uglify'],
        options: {
          nospawn: true,
          livereload: 45729
        }
      },
      options: {
        livereload: true,
      },
    },

    sass: {
      dist: {
        files: {
          'css/styles.css': 'scss/styles.scss'
        }
      }
    },

    jshint: {
      myFiles: ['js/src/*.js']
    },

    concat: {
      options: {
        separator: ';',
      },
      dist: {
        src: ['../../../libraries/popper.js/dist/umd/popper.js', '../../../libraries/bootstrap/dist/js/bootstrap.js', 'js/src/*.js'],
        dest: 'js/scripts.js',
      },
    },

    uglify: {
      my_target: {
        files: {
          'js/scripts.min.js': ['js/scripts.js']
        }
      }
    },
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.registerTask('default', ['watch']);
};

当我在scss文件中进行更改时，它们会编译成styles.css。除此之外，我还希望能够为每个组件编译css

例如：

├── scss
│   ├── _helpers.scss
....
....
└── components
  ├── component1
  │   ├── component1.css
  │   └── component1.scss
  └── component2
      ├── component2.css
      └── component2.scss

这样，如果component2只在1页上使用，我将只将其添加到该1页上

---

如何在GruntFile中设置此选项？

Albertski。如果我理解正确，您希望使用相同的scss文件夹结构生成单独的css文件。据我所见，您只需在所需文件名之前加上ux（下划线），就会生成一个自动生成的.css文件

要想在任何地方使用这个文件，就需要在页面中包含它，例如使用“html--front.tpl.php”，然后在那里调用您的.css或通过hook包含