javascript - SASS - 为页面模板输出单独的样式表

Question

试图了解构建我的 sass 下划线元素的最佳实践。

我有一个使用 npm 和 grunt 的基本工作环境，并编译了我的主要 css，但我想在子文件夹中创建多个页面模板，并将它们各自的 .scss 文件输出到/layout 文件夹中，以便我可以在 function.php 中的主样式表之后将单独的页面模板样式表作为 .css 排队

我大致按照以下顺序构建我的元素文件://更新//

.gitignore
404.php
archive.php
comments.php
/compiled
    style-human.css // Readable CSS Before prefixing //
    style.css // Minified CSS Before Prefixing //
    /page-layouts
        page-frontage.human.css // Readable page-template CSS before prefixing //
        page-frontage.css // minified page-template CSS before prefixing //
/fonts
footer.php
functions.php
gruntfile.js
header.php
/inc
index.php
/js
/languages
/node_modules
package.json
/page-layouts
    page-frontage.css // prefixed minified CSS to be Enqueued after main style.css in functions.php //
    page-frontage-human.css // prefixed readable CSS //
/page-templates
    page-frontpage.php

page.php
rtl.css
/sass
    _normalize.scss
    /elements
    /forms
    /layout
        _footer
        _header
        /page-layouts
            _page-frontpage.scss 
    /media
    /mixins
    /modules
    /navigation
    /site
    style.css // @imports everything SCSS except page-layouts //
    /variables-site
search.php
sidebar.php
single.php
style-human.css // readable main stylesheet //
style.css // minified main stylesheet Enqueued in functions.php //
/template-parts    

这是我在 gruntfile.js 中使用的代码

module.exports = function(grunt){

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        /**
        * sass task
        */
        sass: {
            dev: {
                options: {
                  style: 'expanded',
                    sourcemap: 'none',
                },
                files: {
                 'compiled/style-human.css': 'sass/style.scss'   
                }
        }, 
        dist: {
                options: {
                  style: 'compressed',
                    sourcemap: 'none',
                },
                files: {
                 'compiled/style.css': 'sass/style.scss'   
                }
            }
        },

        /**
        * Autoprefixer
        */
        autoprefixer: {
          options: {
           browsers: ['last 2 versions']
          },
            // prefix all files //
            multiple_files: {
             expand: true,
                flatten: true,
                src: 'compiled/*.css',
                dest: ''
            }
        },

        /**
        * Watch task
        */
        watch: {
            css: {
                files: '**/*scss',
                tasks: ['sass','autoprefixer']    
        }
    }

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

现在我已经尝试了几种不同的解决方案，但我还远未了解我应该如何构建我的 gruntfile.js，以便它在布局文件夹中将我的两个页面模板 scss 作为自动前缀的 css 输出。

Answer 1

设法找到了一个可行的解决方案，可能不是最优雅的解决方案，但它确实有效，有点......

我的文件结构如下:

.gitignore
404.php
archive.php
comments.php
/compiled
    style-human.css //-- Readable CSS Before prefixing --//
    style.css //-- Minified CSS Before Prefixing --//
    /page-layouts
        frontage.human.css //-- Readable page-template CSS before prefixing --//
        frontage.css //-- minified page-template CSS before prefixing --//
/fonts
footer.php
functions.php
gruntfile.js
header.php
/inc
index.php
/js
/languages
/node_modules
package.json
/page-layouts
    frontage.css //-- prefixed minified CSS to be Enqueued after main style.css in functions.php --//
    frontage-human.css //-- prefixed readable CSS --//
/page-templates
    frontage.php //-- code for template goes here, Enqueued in functions.php --//
page.php
rtl.css
/sass
    _normalize.scss
    /elements
    /forms
    /layout
        _footer
        _header
        /page-layouts //-- working folder for all page templates --//
            _frontpage.scss //-- SASS for page template goes here! --//
    /media
    /mixins
    /modules
    /navigation
    /page-templates
        frontpage.scss //-- @imports content of ../layout/page-layouts/_frontpage.scss --//
    /site
    style.css //-- @imports everything SCSS except /page-layouts --//
    /variables-site
search.php
sidebar.php
single.php
style-human.css //-- readable main stylesheet --//
style.css //-- minified main stylesheet Enqueued in functions.php --//
/template-parts    

我的 Gruntfile.js 结构如下

module.exports = function(grunt){

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        /**
        * sass task
        */
        sass: {                // Task
            dev: {             // Target
                options: {     // Target options
                  style: 'expanded',
                    sourcemap: 'none',
                },
                files: {       // Dictionary of files
                 'compiled/style-human.css': 'sass/style.scss', // 'destination': 'source'
                    'compiled/page-layouts/frontpage-human.css': 'sass/page-templates/frontpage.scss'   // 'destination': 'source'
                }
        }, 
        dist: {             // Target
                options: {  // Target options
                  style: 'compressed',
                    sourcemap: 'none',
                },
                files: {       // Dictionary of files
                 'compiled/style.css': 'sass/style.scss',   // 'destination': 'source'
                    'compiled/page-layouts/frontpage.css': 'sass/page-templates/frontpage.scss' // 'destination': 'source'

                }
            }
        },  // close sass task

        /**
        * Autoprefixer
        */
        autoprefixer: {
          options: {
           browsers: ['last 2 versions']
          },
            // prefix all files //
            multiple_files: {
             expand: true,
                flatten: true,
                src: 'compiled/*.css',
                dest: ''
            },
            // prefix frontpage template //
            multiple_files: {
             expand: true,
                flatten: true,
                src: 'compiled/page-layouts/*.css',
                dest: './page-layouts'
            },
        },

        /**
        * Watch task
        */
        watch: {
            css: {
                files: '**/*scss',
                tasks: ['sass','autoprefixer']    
        }
    }

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

基本上这是按照我的预期工作的，页面模板样式表在预期的页面布局文件夹中保存为人类可读/缩小的自动前缀版本，这样我就可以在 functions.php 中的主要 style.css 之后将它们排入队列

只有一个“小”问题需要解决，我的页面模板 scss 文件不理解变量...