1

これが私のワークフローですscss。1つの「app.scss」にインポートされる20個のファイルがあります。以下を参照してください

@import 
"base/normalize",
"base/foundation/functions",
"base/settings", 
"app/functions",
"app/mixins",
"app/components/icons",
etc

SASS フォルダー構造は編成されています 'SASS/base および SASS/base' ルートには、すべてをインポートする 1 つの 'app.scss' ファイルがあります

「Gruntfile.js」を介してコンパイルして変更を監視します-これは次のようになります

sass: {
        dist: {
            options: {
                includePaths: ['scss'],
                imagesDir: 'assets/img',
                cssDir: 'assets/css'
            },
            files: {
                'assets/css/app.css':  'sass/app.scss'
            }
        }
    },
    watch: {
        sass: {
            files: 'sass/**/*.scss',
            tasks: ['sass']
        },
        css: {
            files: 'assets/**/*.css',
            options: {
                livereload: true
            }
        },
        javascript: {
            files: ['app/**/*.js', 'app/**/*.hbs'],
            options: {
                livereload: true
            }
        }
    },

これは本番環境には最適ですが、開発中はデバッグ用に別の css ファイルが必要です..

開発段階で20を含める必要なく、開発用にGruntfileとSASSを介して複数のcssファイルを持つ方法はあります<link rel="stylesheet"...か...

ここでの使用に関するコメントに基づいてsourceMap, sourceComments、私のうなり声は次のようになります

    sass: {
        dist: {
            options: {
                includePaths: ['scss'],
                imagesDir: 'assets/img',
                cssDir: 'assets/css'
            },
            files: {
                'assets/css/app.css':  'sass/app.scss'
            }
        }
        sourceComments: {
            options: {
                sourceComments: 'normal'
            },
            files: {
                'assets/css/source-comments-app.css':  'sass/app.scss'
            }
    },
        sourceMap: {
            options: {
                sourceComments: 'map',
                sourceMap: 'source-map.css.map'
            },
            files: {
               'assets/css/source-maps-app.css':  'sass/app.scss'
            }
        },
    },

しかし、エラーが発生しています... sourcemap と sourceComments の app.scss からすべてのマッピング情報を取得すると仮定しますか?

4

3 に答える 3

0

私はFoundation 5（正確にはFoundation 5 Drupalサブテーマ）でGruntを使用しています.sourceComments: "map"をdistに追加するとうまくいきました.

dist: { options: { **YOUR OTHER OPTIONS HERE*** sourceComments: "map" } }

于 2014-06-11T22:43:49.327 に答える