导入光滑的轮播主题 css 会在 webpack 构建中引发错误 [英] Importing slick carousel theme css throws errors on webpack build

问题描述

我正在尝试将 slick-theme.scss 作为

I'm trying to import slick-theme.scss in my parent scss as

@import "../node_modules/slick-carousel/slick/slick-theme.css";

但在捆绑期间，我在 slick-theme.scss 中导入的文件出现错误.这是错误日志

but during bundle, I get errors on the files imported in slick-theme.scss. Here's the error log

ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./sass/app.scss
    Module not found: Error: Can't resolve './ajax-loader.gif' in '/Users/Vishal/Documents/Work/nf-core/sass'
     @ ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./sass/app.scss 6:89679-89707

我尝试将 resolve-url-loader 也添加到 webpack 配置中，但这无济于事.

I tried adding resolve-url-loader as well to the webpack configuration, but that doesn't help.

这是我的 webpack scss 加载器部分

Here's my webpack scss loader section

loaders: commonConfig.module.loaders.concat({
    test: /\.s?css$/,
    exclude: /(node_modules)/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'postcss-loader', 'sass-loader']
    })
})

推荐答案

Roberto Alicata 的解决方案有效，但可以更轻松地实现，无需额外文件.只需在导入 slick 之前添加这两个变量:

The solution by Roberto Alicata works, but can be achieved easier and without an additional file. Just add these two variables before importing slick:

$slick-font-path: "~slick-carousel/slick/fonts/";
$slick-loader-path: "~slick-carousel/slick/";

@import '~slick-carousel/slick/slick', '~slick-carousel/slick/slick-theme';

其他变量不会引起问题，!default 标志用于定义一个默认值被覆盖，而不是覆盖它.

The other variables don't cause problems and the !default flag is used to define a default value to be overwritten, not to overwrite it.

这篇关于导入光滑的轮播主题 css 会在 webpack 构建中引发错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！