能够让 sass 组件具有单独的输出 css 文件答案

【问题标题】：Ability to have sass components have separate output css files能够让 sass 组件具有单独的输出 css 文件
【发布时间】：2018-07-09 20:46:17
【问题描述】：

我有一个 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

这是我的 GruntFile.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只用在一页上，我只会把它加到那一页上。

如何在我的 GruntFile 中进行设置？

【问题讨论】：

标签： gruntjs drupal-theming

【解决方案1】：

阿尔贝茨基。如果我理解正确，您想生成具有相同 scss 文件夹结构的单独 css 文件。据我所知，您只需要在所需文件的名称前加上 _（下划线），就会生成一个自动生成的 .css 文件。

要在任何你想要的地方使用这个文件，就是你如何将它包含在你的页面中，例如使用“html--front.tpl.php”并在那里调用你的 .css 或通过钩子包含。

【讨论】：