Не удается получить модульную структуру Sass, работающую в среднем. Js grunt

Question

Я настроил grunt tast для компиляции всех файлов sass и scss в css с помощью grunt-contrib-sass. Проблема, с которой я сталкиваюсь, заключается в том, что это модульная архитектура, у меня нет ни одной папки 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, вы идете все на sass.

1. Переименуйте каждую папку css в public/modules/*/ в 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: {
    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. Удалите ссылки на файлы *.css в ресурсах:lib:css и assets:css, за исключением public / dist / application.css и public / dist / application.min.css.
2. Если хотите, используйте соответствующую sass-версию начальной загрузки и следуйте подходу @include в main.scss.