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

Question

我正在尝试使用 g运行tjs 将我的 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）

G运行t 任务的设置 & 运行 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 文件输出

Empty CSS File Output When Converting SASS to CSS Using GruntJS

css

sass

gruntjs