使用Sass和Grunt時，在哪裏鏈接背景圖像？

這是我工作的第一個項目，其中html和css文件位於不同的目錄中，但這也是我第一次使用grunt進行任務自動化，如縮小和預處理我的CSS。使用Sass和Grunt時，在哪裏鏈接背景圖像？

我的問題是，當我鏈接的圖像文件爲背景圖像對我的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']); 

};

來源

2017-04-07 newman

當然你可以將它從「處理的css文件將是」鏈接起來。鑑於你的CSS看起來像在一個子文件夾「build」中，你需要改變你的路徑（在SASS中，它將編譯完全一樣的，但到CSS/build目錄）...

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

來源

2017-04-08 09:09:38 mayersdesign

非常感謝！這工作！如果我可能會問，當'../'應該從存放css文件的兩個目錄上去時'url（「../ img/house_front.jpg」）;'不起作用。爲什麼我需要做'../../'？ – newman

@newman IUt聽起來像你可能會對'../'做些什麼感到困惑。 IT只能遍歷一個目錄（我從來沒有真正想過它是兩個點，所以'../../'遍歷兩個（etc），把它看作是「建立起來」（把你放入CSS），然後「 up up of CSS「（把你放入根目錄），然後放回到」img「，最後放到文件中。 – mayersdesign

@newman你的做法沒有問題，但是我個人將SASS保存在assets/sass這樣的子文件夾中/然後直接將它編譯到/ css，這對我來說似乎更合乎邏輯，並且意味着我只需要'../'去到/ img或其他任何東西。我認爲你的構建文件夾是超級的。當然還要將SASS和CSS保存在同一個文件夾中。 – mayersdesign

使用Sass和Grunt時，在哪裏鏈接背景圖像？

回答

相關問題