Как скомпилировать несколько файлов scss с помощью grunt-sass

Я пытаюсь скомпилировать несколько файлов .scss в один файл CSS. Это фактически работает, но только захватывает первый файл...

sass: {                                 // Task
   dist: {     
     files: {
       'css/test.css':'sass/*.scss'
     }

   }
}

У нас нет рубинов, поэтому grunt-contrib-sass не вариант. Я делаю то же самое в Stylus, как это...

stylus: {
  compile : {
    files : {
      'css/g.css' : 'stylus/*.styl'
    }
  }
}

Ответ 1

Как насчет запуска grunt-contrib-concat сначала?

concat: {
       dist: {
         src: [
           'sass/*.scss',
         ],
         dest: 'sass/build.scss',
       }
     },

sass: {                                 // Task
   dist: {     
     files: {
       'css/test.css':'sass/build.scss'
     }

   }
}

а затем задание:

grunt.registerTask('sass', ['concat', 'sass']);

изменить

Как вы используете @import? Я не специалист по специфике, но вот что я делаю...

реж/

main.scss
_nav.scss
_vars.scss
etc.

main.scss

@import "nav";
@import "vars";
etc.

Ответ 2

Я просто хочу затронуть это, потому что у меня была такая же проблема, и это действительно сработает:

    sass: { // Task
       dist: {         
         files: [{
             // Set to true for recursive search
             expand: true,
             cwd: 'scss/',
             src: ['**/*.scss'],
             dest: 'css/',
             ext: '.css'
         }]
       }
    }

Сообщите мне, как это происходит!

Ответ 3

Если вы не хотите использовать concat, вы можете указать все файлы в каталоге. Оформить заказ в этом примере: https://github.com/gruntjs/grunt-contrib-sass#compile-files-in-a-directory

Ответ 4

Вы можете использовать "grunt-sass-globbing". Он будет генерировать SCSS файл со всеми импортами, указанными в вашем файле Grunt. https://www.npmjs.com/package/grunt-sass-globbing/

С помощью этой опции вы можете сохранить исходные карты, и вам не нужно объединять файлы SCSS.

Шаг 1: Создайте файл импорта

sass_globbing: {
    your_target: {
        options: {
            useSingleQuotes: false,
            signature: '// Hello, World!'
        },
        files: {
            'imports.scss': 'partials/**/*.scss',
        }
    }
}

Шаг 2: Скомпилируйте файл импорта

sass: {
    options: {
        sourceMap: true
    },
    develop: {
        files: {
            'main.css': 'imports.scss'
        }
    }
}

Ответ 5

Это очень просто.

скажем, у вас есть эта структура с двумя файлами scss:

   scss/
       core/file.scss
       templates/file2.scss
       main.scss

так что вам нужно сделать: создать файл с именем: main.scss в корневой папке scss и импортировать все ваши scss файлы:

Например: main.scss будет иметь:

@import "core/file.scss"
@import "templates/file2.scss"

теперь используйте grunt-contrib-sass и просто вызывайте файл main.scss:

сделано:)

//Sass ===============================
            var sass;
            config.sass = sass = {};

                //production
                    sass.dist = {
                        options: { style: "compressed"}
                        , files: {
                            "public/stylesheets/myapp.production.css" : "sass/main.scss"
                        }
                    };

                //development env.
                    sass.dev = {
                    options: { style: "expanded", lineNumber: true}
                    , files: {
                        "public/stylesheets/myapp.development.css" : "sass/main.scss"
                    }
                };