在webpack构建时，css会抛出错误

qyzbxkaa 于 12个月前发布在 Webpack

关注(0)|答案(6)|浏览(167)

我试图在父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']
    })
})

型

webpack

来源：https://stackoverflow.com/questions/48416945/importing-slick-carousel-theme-css-throws-errors-on-webpack-build

6条答案

按热度按时间

ckx4rj1h1#

解决方案由罗伯托Alicata工程，但可以更容易地实现，无需额外的文件.只需添加这两个变量导入光滑之前：

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

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

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

赞(0）回复(0）举报 12个月前

roqulrg32#

创建一个文件.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文件导入这个文件。

赞(0）回复(0）举报 12个月前

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文件夹中。

赞(0）回复(0）举报 12个月前

nkoocmlb4#

在webpack.js.js中将限制增加到4180对我来说很有用。

赞(0）回复(0）举报 12个月前

ycl3bljg5#

费边·冯·埃里森的解决方案是正确的，但在我的情况下，我需要改变路径。

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

字符串
注：我使用的是Storybook

赞(0）回复(0）举报 12个月前

zy1mlcev6#

我在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");
  }

字符串
我不知道人们从哪里得到字体文件（？）

赞(0）回复(0）举报 12个月前

我来回答

在webpack构建时，css会抛出错误

6条答案

相关问题

热门标签

最新问答