sass-загрузчик webpack не находит базовый файл scss без префикса подчеркивания

Question

Недавно я работал над инструментарием быстрой разработки веб- интерфейса с webpack, sass, bower и foundation5.

Я столкнулся с проблемой: sass-loader загружает только файл scss с префиксом подчеркивания.

Среды

узел 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

макет проекта

- bower_componets
- package.json
- источник
-- стиль
--- test.scss
--- settings.scss
- webpack.config.js

Когда я запускаю команду webpack, я получаю сообщение об ошибке:

ОШИБКА в../~/css-loader!../~/sass-loader?outputStyle=expanded&includePaths[]=/home/ray/test/testsassloader/bower_co mponents/foundation/scss!./style/test.scss
Ошибка сборки модуля: @import "normalize"; ^ Файл для импорта не найден или не читается: ./_normalize.scss в /home/ray/test/testsassloader/src/style/test.scss (строка 2, столбец 9) @ ./style/test.scss 4:14-220

Хотя я копирую bower_components/foundation/scss/normalize.scss в bower_components / foundation / scss / _normalize.scss, это работает.

Поэтому я пытаюсь запустить по node-sass без _normalize.scss:

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

Оно работает!!!

Я прихожу к выводу, что именно веб-пакет решает проблему!! Кто-нибудь может помочь мне решить проблему? Копия сделала правильную работу?

Answer 1

В webpack.config добавьте директорию компонентов bower для разрешения модулей Directories,

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

Затем импортируйте тональность как в test.scss:

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