我试图在父scss中导入slick-theme.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']
})
})
型
6条答案
按热度按时间ckx4rj1h1#
解决方案由罗伯托Alicata工程,但可以更容易地实现,无需额外的文件.只需添加这两个变量导入光滑之前:
字符串
其他变量不会引起问题,
!default
标志用于定义默认值被覆盖,而不是覆盖它。roqulrg32#
创建一个文件.scss(即fix-slick.scss)并写入:
字符串
现在,从你的主scss文件导入这个文件。
bmp9r5qi3#
CSS加载器也会将
@import 'other.css'
或background-image: url("/images/loader.gif")
引用的资源返回到webpack模块树。“
Can't resolve './ajax-loader.gif'
“听起来像是解决gif路径的问题。我觉得不应该以
.
开头CSS加载器通常期望路径以字符(文件名)开头,
/
用于绝对路径,~
用于非相对路径(webpack功能)。这是slick-theme.scss中的错误吗?添加文件加载器或url加载器来处理gif/png/jpg文件也很有用。
主要是将它们从node_modules中取出,放到dist/release文件夹中。
nkoocmlb4#
在webpack.js.js中将限制增加到4180对我来说很有用。
ycl3bljg5#
费边·冯·埃里森的解决方案是正确的,但在我的情况下,我需要改变路径。
字符串
注:我使用的是Storybook
zy1mlcev6#
我在NextJS网站上遇到了这个问题。我发现从
slick-theme.min.css
文件中删除以下CSS有效:字符串
我不知道人们从哪里得到字体文件(?)