問題タブ [grunt-contrib-sass]

Grunt-contrib-sassでコンパイルする前に、GruntFile.jsからSASS内で変数を指定することは可能ですか?

たとえば、CSS で絶対パスが必要な場合、dev ビルドまたは deploy ビルドに基づいて Gruntfile によってパスを定義できます。

LESS ( https://github.com/gruntjs/grunt-contrib-less ) に精通している人にとって、これは LESS と同等の SASS になりますmodifyVars。

GruntFile の例

例 SASS

何らかの理由で、grunt-contrib-sass は、.css複数のファイルではなく、結合されたファイルを生成し.cssます。しかし、これはオプションを定義したときにのみ発生しextます。

ファイル構造:

app/ assets/ stylesheets/ application.web.scss application.mobile.scss application.tablet.scss public/ assets/

Gruntfile.js 構成

sass: { default: { options: { compass: false, noCache: true, style: 'expanded' }, files: [{ expand: true, src: 'application.**.scss', dest: 'public/assets', cwd: 'app/assets/stylesheets', ext: '.css' }] } }

上記の構成により、次のものが生成されます。

app/ assets/ stylesheets/ application.web.scss application.mobile.scss application.tablet.scss public/ assets/ application.css

extオプションを完全に削除すると、次のように生成されます。

app/ assets/ stylesheets/ application.web.scss application.mobile.scss application.tablet.scss public/ assets/ application.web.scss application.mobile.scss application.tablet.scss

私が生成したいのは次のとおりです。

app/ assets/ stylesheets/ application.web.scss application.mobile.scss application.tablet.scss public/ assets/ application.web.css application.mobile.css application.tablet.css

私はおそらく非常に基本的なことを見落としていることを知っていますが、私の人生でこれを解決することはできないようです XD それで、私が間違っていることについて何か考えはありますか?

私は Grunt-Contrib-Sass を使用していますが、config.rb ファイルがどこにも見つからないようです (とにかく作成している場合)。Compass font-face mixin を使用していて、フォント パス "./fonts" を返しているように見えるため、http_fonts_path にパスを割り当てる必要があります。

これは mixin コードです:

今ここに私が得る警告があります:

言うまでもなく、CSS ファイルの出力は警告と同じであり、最初に Sass ファイル mixin に入れたものではありません。

「..」なしでパスを使用すると、正常に動作し、URL に「./fonts」が追加されません。

ただし、それは CSS ファイルで生成したい URL ではありません。

gruntjs で基本的なアプリを実行しようとしています。すべて正常に動作しますが、sass 関連の grunt タスクを実行しようとすると、次のエラーが発生します。

Ruby と Sass、そして Nodejs は既にインストール済みです。これは私の Gruntfile.js です:

Ruby と Sass のバージョン:

Ruby パスは既に PATH 変数に含まれています。

私のプロジェクトでは、最終的にコンパスを取り除き、代わりに autoprefixer を使用しました。新しい css コンパイラが必要だったので、デフォルトの grunt-contrib-sass モジュールを使用しました。これらは私の設定です：

ただし、ソースマップの URL のみを出力します。ファイルへのパスは正しいです。app.scss で、すべての sass ファイル / モジュールをインポートします。

皆さんこんにちは、

プロジェクトには非常に複雑な構造の css ファイルが多数あるため、プロジェクトのルートにある css ファイルを含むフォルダーの構造を複製する必要がありました。そのため、scss ファイルを保存するたびに、grunt は私が与えた 160 行以上の設定をそれぞれチェックする必要があります。この構成を最適化する方法はありますか? おそらく、contrib-sass に、scss ファイルを彼と同じ構造でコンパイルするように指示するオプションはありますか?

これが私のコードの簡単な例です:

ありがとう！

Grunt-contrib-less には、pathsスキャンするディレクトリを @import ディレクティブで指定できるオプションがあります。grunt-contrib-less のドキュメントページのオプションは次のとおりです。

grunt-contrib-sass に相当するものはありますか? 私は少し見ましたが、何も見つけることができませんでした。

Underscores に付属のモジュラー SASS を使用しています (これは WordPress フレームワークですが、ここではあまり関係ありません)。これは、大量の @import ステートメントを含む単純なファイルが 1 つある場合に、bootstrap less または sass で見られるものと非常によく似ています。

私の問題は、コア style.scss で grunt タスク (grunt-contrib-sass) を実行すると、sass/layout/_reset.scss の 32 行目に未定義の変数 "$color__background-body" というエラーが表示されることです。しかし、最初の @import でその変数を定義しています。それを修正すると、次の変数に問題があるため、変数が表示されません。

Koalaコンパイラを使用してブートストラップレスを使用すると、過去に同じ問題が発生し、最終的に変数を使用しなくなりました。しかし、これを解決したいので、何かアイデアがあればぜひ聞いてください!

ファイルと構造は次の場所にあります。

https://github.com/shellwe/Great-Plains-Landscaping-WP/tree/master/sass

また、@import ステートメントではなく、style.scss にすべての変数を含めることで修正できることも理解していますが、可能であればモジュールの感覚を維持したいと考えています。

ありがとう！