2017-10-19 6 views
0

scssをgruntファイルに追加しようとしていますので、次のコマンドを実行しました: npm install grunt-contrib-sass sass --save-dev はその後、私はこれを実行すると、私はコンソールでbuild.scssの出力を取得し、それが空のファイルを作成し、私のGruntfile.jsgruntは、ファイルではなくコンソールにコンテンツを書き込みますか?

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' 
     } 
    } 
}, 

に以下を追加しましたか?

私は何が欠けていますか?

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

+1

あなたは<%= meta.src%> ''削除し、それが動作するかどうかを確認することができます正常に動作しますいい? –

+0

@TarunLalwaniは悲しいことに、 '' ./app/assets/css/all2.css ':'。/ app/assets/scss/build.scss''を変更していません。 – Peter

+1

デバッグ用に最小のgit repoを取得することができます? –

答えて

0

私が代わりにgrunt-sassパッケージに変更することで問題を解決するために管理。

npm install --save-dev load-grunt-tasks load-grunt-tasks それから私は私のGruntfile.jsrequire('load-grunt-tasks')(grunt);に以下を追加し、それだけで働きました。

+0

私が投稿した回答を見てください –

3

grunt-sassに切り替えることは常にオプションでしたが、その理由は問題ではありませんでした。問題は、sassがnpmを使用してインストールされたためです。

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は、ルビーの宝石からサスがインストールされることを期待しています。今

$ 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 */ 
+0

最後に、 'grunt-sass'はルビーに頼らないので、より良い選択でしたが、あなたの努力のために50ポイントを得る! – Peter

関連する問題