sass

Why are nested SCSS imports failing in production but working in development?

I'm battling with a tricky SCSS import situation in my React project that's making me lose my mind.

The Problem

My SCSS imports work perfectly in development, but when I build for production, it breaks because the nested imports aren't being detected by the watch process.

Project Structure

src/
  styles/
    main.scss
    components/
      _button.scss
    variables/
      _colors.scss
    layout/
      _grid.scss

My scss code

@import './components/button';
@import './layout/grid';

// components/_button.scss
@import '../variables/colors';  // This import is being missed

Error Message

Error: Can't find '../variables/colors' in components/_button.scss
    at Object.<anonymous> (webpack:///./src/styles/main.scss?:1:1)

Environment Details

What I've Already Tried

  1. Cleared node_modules and package-lock.json
  2. Double-checked all import paths
  3. Added explicit file extensions (.scss)
  4. Updated node-sass to latest version
  5. Configured webpack to handle nested imports

Questions

  1. What could be causing this difference between development and production?
  2. Is there a specific webpack configuration I'm missing?
  3. Could this be related to the watch process not detecting nested dependencies?
Solution

  • You're using a relative path selection for the import.

    Instead of using '../variables/' try using './variables/' with a single period like you have for your other imports.

    Since you're in main.scss, when you use the relative path '../' it moves the folder lookup from styles/ to src/. And since there is no variables/ folder in src/, it throws the error.