我的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'时，只有styles / 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: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
connect: {
options: {
port: 9000,
hostname: 'localhost'
},
livereload: {
options: {
middleware: function (connect) {
return [
lrSnippet,
mountFolder(connect, '.tmp'),
mountFolder(connect, yeomanConfig.app)
];
}
}
},
test: {
options: {
middleware: function (connect) {
return [
mountFolder(connect, '.tmp'),
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/{,*/}*.js',
'<%= yeoman.dist %>/styles/{,*/}*.css',
'<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
'<%= yeoman.dist %>/styles/fonts/*'
]
}
}
},
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>'
}
},
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
dirs: ['<%= yeoman.dist %>']
}
},
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,*/}*.{png,jpg,jpeg}',
dest: '<%= yeoman.dist %>/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.app %>/images',
src: '{,*/}*.svg',
dest: '<%= yeoman.dist %>/images'
}]
}
},
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,
cwd: '<%= yeoman.app %>',
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/',
src: '{,*/}*.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'
]
}
}
}
});
答案 0 :(得分：10)
我已经在HTML中解决了这个问题：
<!-- build:css styles/modules.css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/animate.css/animate.css">
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="not_bower/foo/plugin.css">
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
您只需生成两个文件，一个在您的app/css文件夹外部使用“外部”css，另一个使用您的应用CSS。
使用此解决方案，您无需触摸Gruntfile.js。
希望它有所帮助。
答案 1 :(得分：9)
Yeoman versions later than 0.9.0的Angular生成器使用grunt-wiredep自动将bower依赖项注入app / index.html。 wiredep查看bower_components中每个依赖项的bower.json配置，并根据主要属性将href添加到app / index。
例如，您可能对bower.json文件具有jquery-ui依赖关系，如下所示：
{
"name": "jquery-ui",
"version": "1.11.1",
"main": [
"jquery-ui.js"
], ...
}
然后当你运行grunt时，wiredep会自动注入＆＃34; jquery-ui.js＆＃34;进入你的app / index.html文件。 NEATO！
问题在于它可能缺少依赖关系。如果您使用bower来管理bower_components目录，那么您不想更改bower_components / jquery-ui中的bower.json文件，因为如果您需要重建依赖项，将会删除任何更改。
相反，您可以覆盖应用bower.json中的主要属性。相反，您可以使用bower overrides：
"overrides": {
"jquery-ui": {
"main": [
"jquery-ui.js",
"this/was/missing/jquery-ui.css"
]
}
}
这使您可以在自己的应用配置中保持项目特定的覆盖位置。
答案 2 :(得分：8)
这是解决方案之一。
copy: {
...
styles: {
expand: true,
cwd: '<%= yeoman.app %>',
dest: '.tmp/',
src: [
'styles/{,*/}*.css',
'bower_components/**/*.css'
]
}
问题是由于.tmp目录下不存在normalize.css，尽管index.html文件显示为<!-- build:css(.tmp) styles/style.css -->。
因此，您需要将CSS文件（实际上是上述案例中bower_components目录下的所有CSS文件）复制到.tmp目录。
或者，您可以在styles / main.css（或main.scss？）中使用@import语句。
答案 3 :(得分：0)
你可以试试这个：
<!-- build:css({app,.tmp}) styles/style.css -->
<link rel="stylesheet" href="bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
有关详细信息，请参阅this issue