5

期待 Sassier Bootstrap 4，我（试图）在 Bootstrap 3.3.5 上从 Less 切换到 Sass 并设置所需的Gruntfile.js文件。我在编译 Less 时没有问题，但不能让 Grunt 与 Sass 一起工作，特别是，$ grunt两者$ grunt watch都让我

Running "watch" task Waiting...

永远。

不用说它不会编译。我试过$ grunt watch --verbose了，得到了很多 green OKs。

我想我有一些错误或效率低下，gruntfile.js但由于这是 Baby's First Gruntfile.js，我被困在这里。你能看出这是什么原因吗？

    /*** Created by morgan on 9/13/15. */    

    module.exports = function (grunt) {
          grunt.initConfig({
            pkg: grunt.file.readJSON('package.json'),

        sass: {
          dev: {
        options: {
          includePaths: ['static/sass']
        },
        dev: {
          options: {
            style: 'expanded',
            compass: false
          },
          files: {
            'css/styles.css': 'sass/styles.scss'
          }
        }
      }
    },

    watch: {
      grunt: { files: ['Gruntfile.js'] },
      sass: {
        files: [
          'sass/**/*.scss'
        ],
        tasks: ['sass:dev']
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', 'watch')
};

我的项目目录，如果有帮助的话：

(Django project)
app
├── static
│   ├── sass
│   │   ├── _bootstrap.scss
│   │   └── styles.scss
│   ├── css
│   │   └── styles.css
│   └── jquery
├── node_modules
│   ├── grunt
│   ├── grunt-contrib-sass
│   └── grunt-contrib-watch
├── Gruntfile.js
└── package.json
4

1 回答 1

2

@maxbeatty在Slack #help中提供了一个可执行的 Gruntfile.js 和 package.json 。在 GitHub 上： https ://github.com/maxbeatty/example-grunt-sass-bootstrap

请注意，如果您将此模板用于您自己的 sass-bootstrap 项目，您可能需要更改files:路径以匹配您自己的路径。

Gruntfile.js

module.exports = function (grunt) {
  grunt.initConfig({
    sass: {
      dev: {
        options: {
          outputStyle: 'expanded'
        },
        files: {
          'static/css/styles.css': 'static/sass/styles.scss'
        }
      }
    },

    watch: {
      sass: {
        files: [
          'static/sass/**/*.scss'
        ],
        tasks: ['sass:dev']
      }
    }
  });

  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', 'watch')
};

package.json 依赖：

  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-sass": "^1.0.0"
  }

同样，两者都来自@maxbeatty。（目录不变）。故障排除存档在watchSlack 频道中以供进一步阅读。

于 2015-09-14T19:21:03.940 回答