无法让模块化的 Sass 结构在平均.js咕噜声中工作

Question

我设置了一个grunt tast，使用grunt contrib sass将所有sass和scs文件编译成css。我面临的问题是，因为这是一个模块化架构，我没有一个sass和css文件夹。相反，我为每个模块都有一个sass和css文件夹。

当我指定模块名称时，它可以工作，并将sass文件编译为css，但仅限于该模块，如下所示：

sass: {
            dev: {
                expand: true,
                cwd: 'public/modules/someModuleName/sass',
                src: ['*.{scss,sass}'],
                dest: 'public/modules/someModuleName/css',
                ext: ['.css']
            }
        }

相反，我需要它为每个模块动态地将sass文件编译成css，如下所示：

sass: {
            dev: {
                expand: true,
                cwd: 'public/modules/**/sass',
                src: ['*.{scss,sass}'],
                dest: 'public/modules/**/css',
                ext: ['.css']
            }
        }

以下是文件夹结构：

|-public
|--modules
|---SomeModuleName1
|----Sass
|-----*.scss
|----CSS
|-----*.css
|---SomeModuleName2
|----Sass
|-----*.scss
|----CSS
|-----*.css

Answer 1

从目录结构的外观和mean.io标记来看，我假设您使用的是meanjs.org或mean.io。

我所做的和建议的是，如果你要用sass，你就要全力以赴。

1. 将public/modules/*/下的每个css文件夹重命名为scss
2. 将现有的*.css文件转换为*.scss文件
3. 在公共目录中创建一个新的[style/scs/stylesheets]文件夹
4. 创建一个新文件（style.scss或main.scs）作为主样式文件。建议使用main.scss作为惯例
5. 在main.scss中导入模块scss文件：

@import "../modules/core/style/core"; @import "../modules/users/style/users";

这个步骤有点烦人，我相信它可以以某种方式自动化。（以下2个选项）

1. https://www.npmjs.com/package/grunt-sass-directory-import
2. https://github.com/chriseppstein/sass-globbing

对于您的sass任务：

sass: {
    options: {
        sourcemap: 'none',
        update: true
    },
    dev: {
        options: {
            lineNumbers: true
        },
        files: {
            'public/dist/application.css': 'public/style/main.scss'
        }
    },
    dist: {
        options: {
            style: 'compressed'
        },
        files: {
            'public/dist/application.min.css': 'public/style/main.scss'
        }
    } },

清理工作到你的咕哝文件：

1. 如果您想要并运行sas:dev任务
2. csslint任务不需要，应该替换为scsslint
3. cssmin任务不需要作为sas:dist具有压缩选项

all.js和production.js:中的清理工作

1. 删除assets:lib:css和assets:css中对*.css文件的引用，public/dist/application.css和public/dist/application.min.css除外
2. 如果需要，请使用相应的sass版本的bootstrap，并遵循main.scss中的@include方法