3

我设置了一个 grunt tast 以使用 grunt-contrib-sass 将所有 sass 和 scss 文件编译成 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
4

1 回答 1

4

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

我所做的并推荐的是，如果你使用 sass，你就全部使用 sass。

  1. 将 public/modules/*/ 下的每个 css 文件夹重命名为 scss
  2. 将现有的 *.css 文件转换为 *.scss 文件
  3. 在公共目录中新建一个 [style/scss/stylesheets] 文件夹
  4. 创建一个新文件（style.scss 或 main.scss）作为主样式文件。推荐 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'
        }
    } },

对您的 gruntfile 进行清理工作：

  1. 如果需要，您需要将 clientSCSS 添加到 watchFiles 并运行 sass:dev 任务。
  2. 不需要 csslint 任务，应该用 scsslint 替换。
  3. 不需要 cssmin 任务，因为 sass:dist 具有压缩选项。

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

  1. 删除 assets:lib:css 和 assets:css 中对 *.css 文件的引用，public/dist/application.css 和 public/dist/application.min.css 除外
  2. 如果需要，请使用相应的 sass 版本的引导程序，并遵循 main.scss 中的 @include 方法
于 2015-03-06T22:51:19.900 回答