Вывод пустого файла CSS при преобразовании SASS в CSS с использованием GruntJS - PullRequest
Новая
       10

Вывод пустого файла CSS при преобразовании SASS в CSS с использованием GruntJS

0 голосов
/ 26 ноября 2018

Я пытаюсь преобразовать свой sass-файл в css, используя gruntjs.Это мой Gruntfile.js: 

module.exports = function(grunt) {
    const sass = require('node-sass');
    // require('load-grunt-tasks')(grunt);
    // Configuration
    grunt.initConfig({
        // pass in options to plugins
        // refenrece to files etc
        sass: {
            options: {
                implementation: sass
            },
            dist: {
                files: [{
                    src: 'sass/*.scss',
                    dest: 'css/main.css'
                }]
            }
        }
    });


    // Load plugins
    grunt.loadNpmTasks('grunt-sass');


    // Register tasks
    grunt.registerTask('convert-sass', 'sass');    
}

Когда я запускаю grunt convert-sass.Задача успешно завершена.Но main.css всегда пуст.

grunt convert-sass

Есть ли какие-либо другие конфигурации, которые я пропустил?

Я пытался добавить sourcemap: true и изменил

files: [{ 'css/main.css': 'sass/*.scss' }] но он все еще пуст

Это мои файлы sass (находятся в каталоге sass)

adimixins.scss: 

@mixin vishovact ($link_color, $visit_color, $hover_color, $active_color) {
    a {
        color: $link_color;
        &:visited {
            color: $visit_color;
        }

        &:hover {
            color: $hover_color;
        }

        &:active {
            color: $active_color;
        }
    }
}

style.scss: 

@import 'adimixins';

$base-color: #7FFFD4;
$second-color: #FF00FF;
$mybackground: #008B8B;

// Buat satu biji kelas
.adi-class {
    width: 100px;
    height: 80px;
    background: $mybackground;
    @include vishovact('blue', 'red', 'yellow', 'green');
    p {
        color: $second-color;
    }
}

* любая помощь будет оценена

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Наконец, после нескольких испытаний.Я понял, что не нужно конвертировать mixins.scss.Потому что он уже конвертируется автоматически.Поэтому я изменяю src: 'sass/*.scss' на src: 'sass/styles.scss',, и это наконец работает.Вот вывод преобразованного файла CSS: 

.adi-class {
  width: 100px;
  height: 80px;
  background: #008B8B; }
  .adi-class a {
    color: "blue"; }
    .adi-class a:visited {
      color: "red"; }
    .adi-class a:hover {
      color: "yellow"; }
    .adi-class a:active {
      color: "green"; }
  .adi-class p {
    color: #FF00FF; }
0 голосов
/ 26 ноября 2018
  1. проверить ruby ​​с помощью ruby -v (установить ruby ​​)

  2. Установить Sass с помощью sudo gem install sass (установить sass )

    настройка для Grunt Tasks и запуска grunt convert-sass

    module.exports = function (grunt) {

  grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),

  sass: {
      dist: {
          options: {
            sourcemap: 'none'
          },
          files: [{
              expand: true,
              cwd: 'sass',
              src: ['**/*.scss'],
              dest: 'css',
              ext: '.css'
          }]
         }
       }

    });

   // Load Grunt plugins
   grunt.loadNpmTasks('grunt-contrib-sass');

   // Register Grunt tasks
   grunt.registerTask('convert-sass', 'sass');
};
...