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

Question

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

我正在使用以下方式导入Foundation：

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

当我尝试导入foundation时，出现了导入错误。阅读sass-loader的文档后，建议我使用如下代码：

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

这个修复了导入错误，但是又创造了新的问题。

我收到的错误是:

ModuleBuildError 模块构建失败: @import "normalize"; ^ 文件未找到或无法读取: normalize 文件未找到或无法读取: normalize 父样式表: ... /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文件夹，但不确定具体原因。

- Adam

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

- Andrius Solopovas

---

你好，你是如何让sass-loader工作的？我已经尝试了几天了，可以帮忙看一下吗？https://dev59.com/jp7ha4cB1Zd3GeqPp95G - Leon Gaban