Question

我正在尝试使用gruntjs将sass文件转换为css。这是我的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始终为空。

还有其他配置吗？

我尝试添加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;
    }
}

*任何帮助将不胜感激

Answer 1

使用ruby -v（安装ruby）检查ruby

使用sudo gem install sass安装Sass（安装sass）

设置Grunt任务并运行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');
};

Answer 2

最后，经过几次试验。我意识到不需要转换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; }

使用GruntJS将SASS转换为CSS时，空CSS文件输出

2 个答案: