Css – webpack’s sass-loader do not find foundation scss file without underline prefix

cssnode.jssasswebpack

Recently, i was working on rapid frontend development toolchain with webpack, sass, bower and foundation5.

I encounter a problem:
sass-loader only load scss file with underline prefix.

Environments

node v0.12.4
webpack 1.9.11
node-sass 3.2.0
sass-loader 1.0.2
os gentoo 3.18

webpack.config.js

var webpack = require('webpack');
var path = require('path');

var getDir = function() {
  var args = Array.prototype.slice.call(arguments);
  return path.join.apply(path, [__dirname].concat(args));
};

module.exports = {
  // webpack options 
  context: getDir('./src'),

  entry: {
    test: "./style/test.scss"
  },

  output: {
    path: getDir('./build'),
    filename: "[name].js"
  },
  module: {
    loaders: [
    { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded&includePaths[]=" + getDir('bower_components', 'foundation', 'scss')}
    ]
  },

  progress: false, // Don't show progress 
  // Defaults to true 

  failOnError: true, // don't report error to grunt if webpack find errors 
  // Use this if webpack errors are tolerable and grunt should continue 

  watch: true, // use webpacks watcher 
  // You need to keep the grunt process alive 

  keepalive: false, // don't finish the grunt task 
  // Use this in combination with the watch option 

  devtool: 'eval'
};

test.scss

@import "settings";
@import "normalize";
@import "foundation/components/panels";
@import "foundation/components/type";

settings.scss

empty file

project layout

– bower_componets
– package.json
– src
— style
— test.scss
— settings.scss
– webpack.config.js

When i run webpack command, i got error:

ERROR in
../~/css-loader!../~/sass-loader?outputStyle=expanded&includePaths[]=/home/ray/test/testsassloader/bower_co
mponents/foundation/scss!./style/test.scss
Module build failed: @import "normalize";
^
File to import not found or unreadable: ./_normalize.scss
in /home/ray/test/testsassloader/src/style/test.scss (line 2, column 9) @ ./style/test.scss 4:14-220

Though, i copy bower_components/foundation/scss/normalize.scss to bower_components/foundation/scss/_normalize.scss, it works.

So i try to run by node-sass without _normalize.scss:

 ./node_modules/node-sass/bin/node-sass --include-path=$(pwd)/bower_components/foundation/scss/ src/style/test.scss

It works!!!

I conclude that it was the webpack resolver cause the problem!!
Any one could help me solve the problem? Did the copy do the right job?

Best Answer

At webpack.config add the bower components dir to resolve modulesDirectories,

{
...
      resolve: {
        modulesDirectories: ['./bower_components', 'node_modules']
      },
      module: {
      ...
      }
...
}

Then, import foundation like so at test.scss:

@import "settings";
@import "~foundation/scss/normalize";
@import "~foundation/scss/foundation";
Related Topic