Grunt - scss не компилируется - gruntFile.js - PullRequest
Новая
       42

Grunt - scss не компилируется - gruntFile.js

0 голосов
/ 08 июня 2018

(Начальный пост)

Я использовал Grunt для этого дерева :

Gruntfile.js : 

module.exports = function(grunt) {
    grunt.initConfig({
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: {
                    'css/style.css': 'Component/**/*.scss',
                }
            }
        },
        watch: {
            css: {
                files: 'Component/**/*.scss',
                tasks: ['sass']
            },
        },
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

Работает без ошибок, но не требует никаких файловstyle.css все еще пуст.

Когда я заменяю эту строку: 

files: {
    'css/style.css': 'Component/**/*.scss',
}

на: 

files: {
    'css/style.css': 'Component/header/header.scss',
}

Он принимает файл .css в header/правильно.

У меня нет ошибок ни с одним из этих двух синтаксисов.

Есть идеи?

1 Ответ

0 голосов
/ 08 июня 2018

Вам нужно использовать шаблон файлов grunt для рекурсивного получения всех файлов в папке источников: 

module.exports = function(grunt) {
    grunt.initConfig({
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: [{
                    expand: true,
                    cwd: 'Component/',
                    src: ['**/*.scss'],
                    dest: 'css/',
                    ext: '.css'
               }]
            }
        },
        watch: {
            css: {
                files: ['Component/**/*.scss'],
                tasks: ['sass']
            },
        },
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

Чтобы использовать шаблоны файлов Grunt, вам нужно указать объект с параметрами вместо значения по умолчанию вформа 'destination': 'source'.Объект шаблона файла имеет следующие параметры: 

{

    // source directory 
    cwd: String,

    // creates the subdirectories or flatten the content to the destination directory
    flatten: Boolean,

    // remove anything and after the file extension and replace with the ext String
    ext: String,

    // destination folder
    dest: String,

    // source file pattern using minimatch to match files
    src: String|Array

}

Подробнее о Шаблоны файлов Grunt и minimatch шаблоны соответствия файлов.

Отредактируйте , чтобы получить желаемый результат (собрать все компоненты в один файл), вам нужно будет сделать следующее:

  1. Изменить имена файлов всех ваших компонентов, напримеризмените Component/header/header.scss на Component/header/_header.scss.Файлы с префиксом _ не будут создавать никаких выходных данных (поведение Sass по умолчанию).
  2. Затем создайте файл начальной загрузки (давайте назовем style.scss, содержащий только ссылку на файлы, которые вы хотите объединить с вашимвыходной файл css. Для каждого файла добавьте @import 'header/header'; для header/_header.scss. Вам не нужно добавлять расширение или префикс _.
  3. Изменить определение files вашей задачи sass:distto: { 'css/style.css' : ['Component/style.scss'] }

Gruntfile.js теперь будет выглядеть так: 

module.exports = function(grunt) {
    grunt.initConfig({
        sass: {
            dist: {
                options: {
                    style: 'expanded'
                },
                files: { 'css/style.css' : ['Component/style.scss'] }
            }
        },
        watch: {
            css: {
                files: ['Component/**/*.scss'],
                tasks: ['sass']
            },
        },
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

Это скомпилирует Component/style.scss (содержащий ссылку на все ваши файлы компонентов) вcss/style.css.

...