Не удается заставить модульную структуру Sass работать в рамках grunt mean.js

Я настроил 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

css sass gruntjs grunt-contrib-sass mean.io
person Elmar Gasimov    schedule 20.09.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Судя по структуре каталогов и тегу mean.io, я предполагаю, что вы используете meanjs.org или mean.io.

Что я сделал и рекомендую, так это то, что если вы идете с дерзостью, вы делаете все в дерзости.

  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-задачи:

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 в assets:lib:css и assets:css, за исключением public/dist/application.css и public/dist/application.min.css.
  2. Используйте соответствующую sass-версию bootstrap, если хотите, и следуйте подходу @include в main.scss.
person xiaogwu    schedule 06.03.2015