Question

这是我正在处理的第一个项目，其中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']);

};

Answer 1

您从＆＃34; 处理的css文件链接＆＃34;当然。鉴于你的CSS看起来像是在子文件夹＆＃34; build＆＃34;你需要改变你的路径（在SASS，它将编译完全相同，但到CSS / build目录）到...

background-image: url("../../img/house_front.jpg");

使用Sass和Grunt时在哪里链接背景图像？

1 个答案: