导入光滑的轮播主题 css 会在 webpack 构建上引发错误

Question

我正在尝试将

slick-theme.scss

在我的父级 scss 中导入为

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

但是在捆绑过程中，我在

slick-theme.scss

中导入的文件上遇到错误。这是错误日志

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 配置中，但这没有帮助。

这是我的 webpack scss 加载器部分

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

Answer 1

Roberto Alicata 的解决方案有效，但可以更轻松地实现，并且无需附加文件。只需在导入 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

标志用于定义默认值被覆盖，而不是覆盖它。

Answer 2

创建一个文件 .scss （即 fix-slick.scss ）并写入：

$slick-font-path: "~slick-carousel/slick/fonts/" !default;
$slick-font-family: "slick" !default;
$slick-loader-path: "~slick-carousel/slick/" !default;
$slick-arrow-color: black !default; 

现在，从主 scss 文件导入此文件。

Answer 3

CSS 加载器还将使用

@import 'other.css'

或

background-image: url("/images/loader.gif")

引用的资源返回到 webpack 模块树。

“

Can't resolve './ajax-loader.gif'

”听起来像是解析 gif 路径时出现问题。
我认为它不应该以

.

CSS 加载器通常期望路径以字符（文件名）开头，

/

表示绝对路径，

~

表示非相对路径（webpack 功能）。这是 slick-theme.scss 中的错误吗？

添加文件加载器或 url-loader 来处理 gif/png/jpg 文件也很有用。
主要是将它们从 node_modules 中取出到 dist/release 文件夹中。

Answer 4

将 webpack.config.js 中的限制增加到 4180 对我来说很有效。

Answer 5

Fabian von Ellerts的解决方案是正确的，但就我而言，我需要更改路径。

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

注意：我正在使用 Storybook

Answer 6

我在 NextJS 网站上遇到了这个问题。我发现从

slick-theme.min.css

 文件中删除以下 CSS 是有效的：

.slick-loading .slick-list{background:url(ajax-loader.gif) center center no-repeat #fff}

@font-face {
    font-family: slick;
    font-weight: 400;
    font-style: normal;
    src: url(fonts/slick.eot);
    src: url(fonts/slick.eot?#iefix) format("embedded-opentype"),
      url(fonts/slick.woff) format("woff"),
      url(fonts/slick.ttf) format("truetype"),
      url(fonts/slick.svg#slick) format("svg");
  }

我不知道人们从哪里获取字体文件（？）