Невозможно получить модульную структуру Sass, работающую в пределах mean.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.

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

1. Переименовать каждую папку CSS под общественностью/модули/*/в SCSS
2. Преобразуйте существующие файлы * .css в * .scss файлов
3. Создать новую [стиль/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. Вы должны были бы добавить клиента SCSS на ваши часы, если вы хотите, и запустите задачу sass: dev.
2. Задача csslint не требуется и должна быть заменена на scsslint.
3. Задача cssmin не нужна, так как sass: dist имеет сжатый вариант.

Cleanup работа в all.js и production.js:

1. Удалить упоминание *.css-файлы в активах: lib: css и assets: css, за исключением public/dist/application.css и public/dist/application.min.css
2. Используйте соответствующую sss-версию bootstrap, если хотите, и следуйте подход @include в main.scss