Как импортировать SCSS Foundation с помощью Webpack 2?

Я пытаюсь использовать Foundation с Webpack 2 с помощью sass-loader.

Я импортирую Foundation с

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

И получите ошибку импорта, так как не может найти фундамент. Чтение документации для sass-loader подсказывает, что я действительно должен использовать:

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

Это устраняет ошибку импорта, но создает новую проблему.

Я получаю сообщение об ошибке

Ошибка ModuleBuildError в сборке модуля: @import "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']
}

Я считаю, что это происходит из-за того, что веб-пакет по какой-то причине не разрешается в папку node_modules, но не уверен, откуда взялась причина.


webpack sass zurb-foundation webpack-2
person Adam    schedule 09.12.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Попробуйте это, так как это единственное, что у меня сработало.

new webpack.LoaderOptionsPlugin({
    options: {
        context: '/', // <- putting this line right under "options" did the trick
        sassLoader: {
            includePaths: [
                path.resolve(__dirname, 'vendor/zurb/foundation/scss'),
            ]
        }
    }
})
person Andrius Solopovas    schedule 24.01.2017
comment
Привет, как у тебя заработал sass-loader? Я пытаюсь уже несколько дней, не возражаете? stackoverflow .com / questions / 42058357 / - person Leon Gaban; 08.02.2017