这是我从事的第一个元素，其中 html 和 css 文件位于不同的目录中，但这也是我第一次使用 grunt 进行任务自动化，例如缩小和预处理我的 CSS。
我的问题是，当我将图像文件链接为我的 css 的背景图像时...我是否将 url() 链接到 scss 文件所在的位置或位置处理后的 css 文件将成为。或者如果我在根目录中，它就在任何地方吗？
如果您查看我的 CSS，我正在尝试为我的页眉制作背景图片，但找不到文件。我错过了什么？
这是我的文本编辑器中目录的屏幕截图: http://imgur.com/6H4hxAJ
这是我的 HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/build/main.css">
<title>Summer Breeze</title>
</head>
<body>
<header class = "hero">
<h1>Text</h1>
</header>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="js/build/app.min.js" type="javascript"/>
</body>
</html>
这是我的 CSS:
.hero {
background-image: url("../img/house_front.jpg");
background-repeat: no-repeat;
background-size:100%;
height:1500px;
}
为了完整起见，这是我的 Gruntfile:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
build: {
src: 'js/app.js',
dest: 'js/build/app.min.js'
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'CSS/build/main.css': 'CSS/main.scss'
}
}
},
watch: {
scripts: {
files: ['js/*.js'],
tasks: ['uglify'],
options: {
spawn: false,
},
},
css: {
files: ['css/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['uglify','sass','watch']);
};
最佳答案
您肯定会从“将要处理的 css 文件”链接它。鉴于您的 CSS 看起来像是在子文件夹“build”中，您需要更改您的路径(在 SASS 中，它将完全相同地编译，但到 CSS/build 目录)以...
背景图像:url("../../img/house_front.jpg");
关于html - 使用 Sass 和 Grunt 时在哪里链接背景图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43287778/