我的index.html页面中有以下块
<!-- build:css(.tmp) styles/style.css --> <link rel="stylesheet" href="bower_components/normalize-css/normalize.css"> <link rel="stylesheet" href="styles/main.css"> <!-- endbuild -->
css文件在我的应用程序结构中正确存在,但是当我运行“grunt build”时,只有样式/ main.css中的CSS才包含在生成的styles / style.css文件中.
我想我需要告诉Grunt来查看bower_components目录中的CSS文件?但我不知道该怎么做?
下面我的gruntfile.js的副本…
grunt.initConfig({ yeoman: yeomanConfig,watch: { styles: { files: ['<%= yeoman.app %>/styles/{,*/}*.css'],tasks: ['copy:styles','autoprefixer'] },livereload: { options: { livereload: LIVERELOAD_PORT },files: [ '<%= yeoman.app %>/{,*/}*.html','.tmp/styles/{,*/}*.css','{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js','<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' ] } },autoprefixer: { options: ['last 1 version'],dist: { files: [{ expand: true,cwd: '.tmp/styles/',src: '{,dest: '.tmp/styles/' }] } },connect: { options: { port: 9000,hostname: 'localhost' },livereload: { options: { middleware: function (connect) { return [ lrSnippet,mountFolder(connect,'.tmp'),yeomanConfig.app) ]; } } },test: { options: { middleware: function (connect) { return [ mountFolder(connect,'test') ]; } } },dist: { options: { middleware: function (connect) { return [ mountFolder(connect,yeomanConfig.dist) ]; } } } },open: { server: { url: 'http://localhost:<%= connect.options.port %>' } },clean: { dist: { files: [{ dot: true,src: [ '.tmp','<%= yeoman.dist %>/*','!<%= yeoman.dist %>/.git*' ] }] },server: '.tmp' },jshint: { options: { jshintrc: '.jshintrc' },all: [ 'Gruntfile.js','<%= yeoman.app %>/scripts/{,*/}*.js' ] },rev: { dist: { files: { src: [ '<%= yeoman.dist %>/scripts/{,'<%= yeoman.dist %>/styles/{,'<%= yeoman.dist %>/images/{,svg}','<%= yeoman.dist %>/styles/fonts/*' ] } } },useminPrepare: { html: '<%= yeoman.app %>/index.html',options: { dest: '<%= yeoman.dist %>' } },usemin: { html: ['<%= yeoman.dist %>/{,*/}*.html'],css: ['<%= yeoman.dist %>/styles/{,options: { dirs: ['<%= yeoman.dist %>'] } },imagemin: { dist: { files: [{ expand: true,cwd: '<%= yeoman.app %>/images',jpeg}',dest: '<%= yeoman.dist %>/images' }] } },svgmin: { dist: { files: [{ expand: true,*/}*.svg',cssmin: { },htmlmin: { dist: { options: { },files: [{ expand: true,cwd: '<%= yeoman.app %>',src: ['*.html','views/*.html'],dest: '<%= yeoman.dist %>' }] } },// Put files not handled in other tasks here copy: { dist: { files: [{ expand: true,dot: true,dest: '<%= yeoman.dist %>',src: [ '*.{ico,png,txt}','.htaccess','bower_components/**/*','images/{,*/}*.{gif,webp}','styles/fonts/*' ] },{ expand: true,cwd: '.tmp/images',dest: '<%= yeoman.dist %>/images',src: [ 'generated/*' ] }] },styles: { expand: true,cwd: '<%= yeoman.app %>/styles',dest: '.tmp/styles/',*/}*.css' } },concurrent: { server: [ 'copy:styles' ],test: [ 'copy:styles' ],dist: [ 'copy:styles','imagemin','svgmin','htmlmin' ] },karma: { unit: { configFile: 'karma.conf.js',singleRun: true } },cdnify: { dist: { html: ['<%= yeoman.dist %>/*.html'] } },ngmin: { dist: { files: [{ expand: true,cwd: '<%= yeoman.dist %>/scripts',src: '*.js',dest: '<%= yeoman.dist %>/scripts' }] } },uglify: { dist: { files: { '<%= yeoman.dist %>/scripts/scripts.js': [ '<%= yeoman.dist %>/scripts/scripts.js' ] } } } });
解决方法
这是解决方案之一.
copy: { ... styles: { expand: true,dest: '.tmp/',src: [ 'styles/{,'bower_components/**/*.css' ] }
这个问题是由于normalize.css不存在于.tmp目录下,尽管index.html文件表示<! - build:css(.tmp)styles / style.css - > ;.
因此,您需要将CSS文件(实际上在上述情况下将bower_components目录下的所有CSS文件)复制到.tmp目录.
或者,您可以在style / main.css(或main.scss?)中使用@import语句.