首页 文章

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

提问于
浏览 次
7

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

我正在进口基金会

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

并获得导入错误，因为它找不到基础 . 阅读sass-loader的文档表明我应该实际使用：

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

这解决了导入错误但会产生新问题 .

我收到的错误是

模块构建中的ModuleBuildError失败：@import“normalize”; ^要导入的文件未找到或不可读：normalize

要导入的文件未找到或不可读：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文件夹，但不确定原因来自何处 .

sass webpack zurb-foundation webpack-2

1 回答

  • 3

    试试这个，因为这对我有用 .

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

相关问题