1

这是我的工作流程，我有 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
            }
        }
    },

这对生产非常有用，但是在开发中我希望有不同的 css 文件用于调试目的..

有没有办法通过 Gruntfile 和 SASS 拥有多个 css 文件进行开发，而不必<link rel="stylesheet"...在开发阶段包含 20 个......

基于关于在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 获取 sourcemap 和 sourceComments 的所有映射信息？

4

3 回答 3

1

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

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

于 2014-04-15T13:44:04.080 回答
0

我通过咕噜声找到了答案..经过大量试验

       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 编译的选项中！

于 2014-04-15T19:31:06.213 回答
0

我将 Grunt 与 Foundation 5（确切地说是 Foundation 5 Drupal 子主题）一起使用，当我将 sourceComments: "map" 添加到 dist 时它起作用了，如下所示：

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

于 2014-06-11T22:43:49.327 回答