Как импортировать SCSS Foundation с помощью Webpack 2?

Question

Я пытаюсь использовать Foundation с Webpack 2 с помощью sass-loader.

Я импортировать фонд с

@import 'foundation-sites/scss/foundation'; 

И получите ошибку импорта, поскольку он не может найти основания. Чтение документации для Сасс-погрузчика предполагает, что я на самом деле использовать:

@import '~foundation-sites/scss/foundation'; 

который фиксирует ошибку импорта, но создает новую проблему.

Ошибка я получаю это

ModuleBuildError в Модуль сборки не удалось: @import "нормализовать"; ^ для импорта файла не найден или нечитаемый: нормализовать

импортируемого файла не найден или нечитаемые: нормализовать Родителя таблицы стилей: ... /node_modules/foundation-sites/scss/foundation.scss в ... /node_modules/foundation-sites/scss/foundation.scss (строка 9, колонка 1)

В моем файле конфигурации WebPack Я также использую ExtractTextPlugin, как показано ниже:

module: { 
    rules: [ 
     { 
       test: /\.(scss|css)$/, 
       loader: ExtractTextPlugin.extract({ 
       fallbackLoader: 'style-loader', 
       loader: [ 
        { 
         loader: 'css-loader' 
        }, 
        { 
         loader: 'sass-loader', 
         query: { 
          includePaths: [path.resolve(__dirname, "./node_modules")] 
         } 
        } 
       ] 
      }) 
     } 
    ] 
}, 
resolve: { 
    modules: ['node_modules'] 
} 

Я считаю, что это происходит от веб-пакет не решает задачу fold_modules folde r почему-то, но не знаете, откуда эта причина.

Answer 1

Попробуйте это, как это единственное, что сработало для меня.

new webpack.LoaderOptionsPlugin({ 
    options: { 
     context: '/', // <- putting this line right under "options" did the trick 
     sassLoader: { 
      includePaths: [ 
       path.resolve(__dirname, 'vendor/zurb/foundation/scss'), 
      ] 
     } 
    } 
})