Question

我正在尝试将scss添加到我的grunt文件中，因此我运行了以下命令： npm install grunt-contrib-sass sass --save-dev。然后我将以下内容添加到我的Gruntfile.js

grunt.loadNpmTasks('grunt-contrib-sass');和

grunt.initConfig({
...
sass: {
    dev: {
        files: {
            '<%=meta.src %>assets/css/all2.css': '<%=meta.src %>assets/scss/build.scss'
        }
    },

    dist: {
        files: {
            '<%=meta.dist %>/assets/css/all.min.css': '<%=meta.src %>/assets/scss/build.scss'
        }
    }
},

当我运行这个时，我在控制台中得到build.scss的输出并创建一个空文件？

我错过了什么????

Running "sass:dev" (sass) task
#flupdidup {
  font-weight: bold;
}
Running "sass:dist" (sass) task
#flupdidup {
  font-weight: bold;
}
Done, without errors.
Process terminated with code 0.

可以在此处找到问题的最小重新创建：https://github.com/Peter-Optiway/grunt-sass-issue

Answer 1

切换到grunt-sass始终是一种选择，但问题不在于此。问题是因为您使用npm安装了sass。

npm install -g sass

当你看那个

$ sass --help
Compile Sass to CSS.

Usage: dart-sass <input>

-s, --style         Output style.
                    [expanded (default)]

-c, --[no-]color    Whether to emit terminal colors.
    --[no-]trace    Print full Dart stack traces for exceptions.
-h, --help          Print this usage information.
    --version       Print the version of Dart Sass.

它没有输出参数。虽然grunt-contrib-sass期望从ruby gem安装sass。

$ sudo gem install sass

现在sass将有不同的选择

$ sass --help
Usage: sass [options] [INPUT] [OUTPUT]

Description:
  Converts SCSS or Sass files to CSS.
...

现在构建工作正常

$ cat ./dist/assets/css/all.min.css
main #flupdidup {
  font-weight: bold;
  background: #eeffcc; }

/*# sourceMappingURL=all.min.css.map */

Answer 2

我设法通过更改为grunt-sass包来解决问题。

npm install --save-dev load-grunt-tasks load-grunt-tasks 然后我将以下内容添加到我的Gruntfile.js require('load-grunt-tasks')(grunt);，它就可以了。

grunt将内容写入控制台而不是文件？

2 个答案: