如何在 yeoman angular bootstrap-saas i 中从 main.scss 生成 css

Question

我已经开始了一个项目：

$ yo angular
include Twitter Bootstrap? Yes
use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework? Yes
$ grunt watch

我更改了 app/stypes 目录中的 main.scss 文件，我在控制台中看到它已更改，但没有生成 CSS 文件。怎么回事？

当前的咕噜声说：

// Watches files for changes and runs tasks based on the changed files
watch: {
  bower: {
    files: ['bower.json'],
    tasks: ['wiredep']
  },
  js: {
    files: ['<%= yeoman.app %>/scripts/{,*/}*.js'],
    tasks: ['newer:jshint:all'],
    options: {
      livereload: '<%= connect.options.livereload %>'
    }
  },
  jsTest: {
    files: ['test/spec/{,*/}*.js'],
    tasks: ['newer:jshint:test', 'karma']
  },
  compass: {
    files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
    tasks: ['compass:server', 'autoprefixer']
  },
  gruntfile: {
    files: ['Gruntfile.js']
  },
  livereload: {
    options: {
      livereload: '<%= connect.options.livereload %>'
    },
    files: [
      '<%= yeoman.app %>/{,*/}*.html',
      '.tmp/styles/{,*/}*.css',
      '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
    ]
  }
},

Answer 1

这是 grunt 的文档中关于编译样式表的内容。另请注意，转换发生在部署期间，而不是在监视之下。

sass: {
    dist: {
      files: [{
        expand: true,
        cwd: 'styles',
        src: ['*.scss'],
        dest: '../public',
        ext: '.css'
      }]
    }
  }