sass - 如何使用 Webpack 2 导入 Foundation 的 SCSS？

Question

我正在尝试使用 sass-loader 将 Foundation 与 Webpack 2 一起使用。

我正在导入 Foundation

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

并因为找不到基础而出现导入错误。阅读 sass-loader 的文档表明我应该实际使用:

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

这修复了导入错误，但产生了一个新问题。

我收到的错误是

模块构建错误
模块构建失败:
@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']
}

我相信这来自 webpack 出于某种原因没有解析到 node_modules 文件夹，但不确定原因来自哪里。

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