import statements caveat about sass-loader HOT 6 CLOSED

@mikeyamadeo until sass-loader gets whatever resolution features they need from libsass, you'll have to do like this:

webpack.config.js:

      {
        test: /\.s?css$/,
        loaders: [
          'css',
          'sass?includePaths[]='+ path.resolve(__dirname, 'node_modules') +
            '&includePaths[]='+ path.resolve(__dirname, 'bower_components')
            // tells sass-loader to look in these dirs when resolving files
        ]
      }

app.scss:

// These files are in the same directory as app.scss
@import "variables";
@import "breakpoints";

// These files are in the bower_components directory
@import "susy/sass/susy"; // resolves to bower_components/susy/sass/_susy.scss
@import "compass-breakpoint/stylesheets/breakpoint"; // resolves to bower_components/compass-breakpoint/stylesheets/breakpoint.scss

If you use a lot of a library (such as pulling selective files from bootstrap), you could add that to your includePaths like '&includePaths[]='+ path.resolve(__dirname, 'bower_components', 'bootstrap-sass', 'assets', 'stylesheets')

from sass-loader.

Hi. I've just begun configuring with webpack and for the life of me hadn't be able to get imports to resolve w/ a combination of webpack aliasing and modulesDirectories using sass-loader.

"File to import not found or unreadable" is my ever occurring error.

Alas, I read the sass-loader caveat. Just wanted to confirm my understanding after reading through the issues that a solution to this is still being worked on? @jhnns

Thanks!

from sass-loader.

but note your webpack resolve.alias settings won't never be taken into consideration for sass @imports, until #53

from sass-loader.

#31

from sass-loader.

Just wanted to confirm my understanding after reading through the issues that a solution to this is still being worked on?

Yes

from sass-loader.

@grrowl Thank You! I appreciate you taking the time to help me out on this. This does just the trick.

from sass-loader.