twitter-bootstrap - Grunt livereload 使用 yeoman 编译引导 sass 文件

Question

我的问题很简单，我已经yo webapp使用 bootstrap、sass、compass 和 jquery 进行了 yeoman ( ) 的基本安装。

我想在 livereload 上编译 bootstrap sass 文件，因为我正在使用grunt serve. 目前只有 main.scss 文件似乎是在 livereload 上编译的。

可能吗 ？如果，是的，请告诉我如何？

此致，

Answer 1

试试这样：

手表：

watch: {
    livereload: {
        files: [
            '<%= yeoman.app %>/*.html',
            '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
            '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
            '<%= yeoman.app %>/img/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
        ],
        tasks: ['livereload']
    },

    sass: {
        files: "<%= yeoman.app %>/sass/{,**/}*.sass",
        tasks: ["sass:tmp"]
    }
}

萨斯：

sass: {
    tmp: {
        files: {
            "<%= yeoman.tmp %>/styles/index.css": "app/sass/index.sass",
        },
        options: {
            paths: ["app/sass"]
        }
    },
}

Answer 2

在对 boostrap sass 文件进行更改后，只需在 main.scss 文件中点击“保存”即可。例如，我在包含变量的引导 sass 文件中重新配置了颜色变量，然后将其保存，以及 main.scss 文件。浏览器重新加载，让一切看起来都像番茄。