7

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 フォルダーに解決されていないことが原因であると考えていますが、原因がどこにあるのかは不明です。

4

1 に答える 1