sass-loader を使用して Foundation を Webpack 2 で使用しようとしています。
Foundationをインポートしています
@import 'foundation-sites/scss/foundation';
また、基盤が見つからないため、インポート エラーが発生します。sass-loader のドキュメントを読むと、実際に使用する必要があることが示唆されます。
@import '~foundation-sites/scss/foundation';
インポートエラーは修正されますが、新しい問題が発生します。
私が受け取るエラーは
モジュールビルドの ModuleBuildError が失敗しました: @import "normalize"; ^ インポートするファイルが見つからないか読み取り不能: 正規化
インポートするファイルが見つからないか読み取り不能: 正規化親スタイル シート: ... /node_modules/foundation-sites/scss/foundation.scss in ... /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']
}
これは、何らかの理由で webpack が node_modules フォルダーに解決されていないことが原因であると考えていますが、原因がどこにあるのかは不明です。