作者:mobiledu2502930997 | 来源:互联网 | 2022-12-31 11:32
我正在尝试将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']
})
})
Fabian von E..
6
罗伯托·阿里卡塔(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
标志用于定义要覆盖的默认值,而不是覆盖默认值。
1> Fabian von E..:
罗伯托·阿里卡塔(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
标志用于定义要覆盖的默认值,而不是覆盖默认值。
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文件导入该文件。