Foundation 6(zurb-template)自定义_settings.scss导入失败求助

Hey there, let's walk through some common fixes for this issue—since you already know your other src files auto-reload fine, the problem is likely tied to a small oversight with your settings file setup.

1. Fix Typographical Errors (Most Common Culprit!) #

First, double-check the exact spelling in your import statement and filename:

• The error mentions _setting.scss (singular), but your file is named _settings.scss (plural). It’s easy to miss that extra "s" in your app.scss import line. Make sure it reads:

  @import 'settings'; // Not 'setting'!
  

• Also, watch for case sensitivity (critical on Linux/macOS): If your file is named _Settings.scss but you’re importing settings, that will break things. Match the exact case in both the filename and import.

2. Verify Your config.yml Paths #

Even if you think it’s correct, let’s confirm the setup matches your folder structure. In your project’s config.yml, ensure the Sass source path points directly to where your _settings.scss lives. For example:

paths:
  source:
    sass: src/assets/scss # Adjust this if your settings file is in a subfolder like src/scss/partials

If _settings.scss is in a subdirectory (like src/assets/scss/partials), update your import to reflect that:

@import 'partials/settings';

3. Clear Gulp Cache & Restart the Dev Server #

Sometimes Gulp’s cached files can cause false "missing file" errors. Try this:

1. Stop your running dev server with Ctrl + C
2. Run gulp clean to wipe cached assets
3. Delete the .tmp folder in your project root manually (just to be safe)
4. Restart the server with gulp

4. Check File Permissions (Unix-Based Systems) #

If you’re on macOS or Linux, ensure your _settings.scss file has proper read permissions. Run this command in your terminal:

ls -l src/assets/scss/_settings.scss

If permissions are restricted, fix them with:

chmod 644 src/assets/scss/_settings.scss

5. Confirm Import Order in app.scss #

Foundation requires _settings.scss to be imported before the core Foundation files. Your app.scss should follow this order:

// 1. Settings first
@import 'settings';
// 2. Then Foundation core
@import 'foundation';
// 3. Your custom styles last
@import 'app';

Importing settings after Foundation won’t cause a "file not found" error, but it’s a good practice to rule out any related issues.

6. Update Dependencies #

Outdated Foundation CLI or npm packages can sometimes cause odd bugs. Try:

1. Update the Foundation CLI globally: npm update foundation-cli -g
2. In your project directory, run npm update to refresh local dependencies
3. Restart the dev server

Let me know if any of these steps resolve your issue!

内容的提问来源于stack exchange，提问作者Andrew F.