Jak importować SCSS Foundation za pomocą Webpack 2?

Question

Próbuję użyć Foundation with Webpack 2, używając Sass-Loka.

jestem importowania Fundacji

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

I pojawia się błąd importu, ponieważ nie może znaleźć fundament. Czytanie dokumentów dla programu ładującego sugeruje, że powinienem użyć:

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

Naprawia błąd importu, ale tworzy nowy problem.

Błąd zgłaszany jest

ModuleBuildError w Module build failed: @import "znormalizować"; ^ pliku nie znaleziono import lub nieczytelny: normalizować

plik do importu nie znaleziono lub nieczytelny: normalizować styl macierzysty arkusz ... /node_modules/foundation-sites/scss/foundation.scss w ... /node_modules/foundation-sites/scss/foundation.scss (linia 9, kolumna 1)

W moim pliku konfiguracyjnym WebPack jestem również za pomocą ExtractTextPlugin jak poniżej:

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'] 
} 

wierzę, że to pochodzi z webpack nie rozwiązuje problemu z foldem node_modules r z jakiegoś powodu, ale nie wiadomo, skąd bierze się przyczyna.

Answer 1

Wypróbuj to, ponieważ to jedyna rzecz, która zadziałała dla mnie.

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