导入光滑轮播主题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 加载器还将返回webpack 模块树引用@import 'other.css'或返回的资源。background-image: url("/images/loader.gif")

“ Can't resolve './ajax-loader.gif'” 听起来好像解析 gif 路径时出现问题。
我认为它不应该以.
CSS 加载器开头，通常期望路径以字符（文件名）开头，/对于绝对路径和~非相对路径（webpack 功能）。这是 slick-theme.scss 中的错误吗？

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