Question

以下是我的工作流程我有20个scss个文件导入到一个'app.scss'中，见下文

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

SASS文件夹结构是'SASS / base和SASS / base'根目录有一个'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
            }
        }
    },

这对于生产很有用，但在dev中我希望有不同的css文件用于调试目的..

有没有办法通过Gruntfile和SASS开发多个css文件进行开发，而不必在开发阶段包含20 <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'
            }
        },
    },

但是我收到了一个错误...咕噜咕噜想要从app.scss获取源图和sourceComments的所有映射信息？

Answer 1

您可以使用源映射轻松识别编译的app.css的一部分来自哪个sass文件。

请参阅grunt-sass plugin中的sourceComments和sourceMap选项。

Answer 2

我在很多试验后通过grunt找到答案

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

它必须在scss编译的选项中！

Answer 3

我使用Grunt和Foundation 5（确切地说是一个基础5 Drupal子主题），并且当我添加sourceComments时它起作用了：＆＃34; map＆＃34;如此：

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

SASS工作流程，通过Grunt更轻松地进行CLI调试

3 个答案: