Question

我设置了一个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

Answer 1

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

我所做的和建议是，如果你和萨斯一起去，那么你就全力以赴。

将public / modules / * /下的每个css文件夹重命名为scss
将现有* .css文件转换为* .scss文件
在公共目录中创建一个新的[style / scss / stylesheets]文件夹
创建一个新文件（style.scss或main.scss）作为主样式文件。推荐main.scss作为约定。
在main.scss中导入模块scss文件：

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

这一步很烦人，我确信它可以以某种方式自动化。（以下2个选项）

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

为了你的任务：

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工作：

如果需要，您需要将clientSCSS添加到您的watchFiles 运行sass：dev任务。
csslint任务不是必需的，应该是替换为scsslint。
cssmin任务不需要作为sass：dist 有压缩选项。

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

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

无法在mean.js grunt中使用模块化Sass结构

1 个答案: