Question

在这里反应初学者。我的应用程序使用了create-react-app，我正在使用react-slick来获取旋转木马。我正在尝试遵循设置中为react-slick提供的说明，但以下内容对我不起作用：

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

我收到以下错误：

./src/components/Homepage.scss Module not found: Can't resolve '~slick-carousel/slick/slick.css' in '/Users/simon/Dev/frischideas/site-new/src/components'

如果我从CDN中将css添加到index.html，它会起作用，但我宁愿避免使用该网络调用，因为我认为这会影响初始加载时页面的呈现。

我尝试按照instructions配置create-react-app来使用相对路径，但这对我来说也不起作用。也许我完全误解了，但我认为〜符号允许我从/ node_modules中的包中导入scss。

非常感谢任何建议/澄清。

更新：从我的webpack.config文件添加设置（其中大部分是create-react-app的默认设置）。 { test: /\.scss$/, use: [ require.resolve('classnames-loader'), require.resolve('style-loader'), { loader: require.resolve('css-loader'), options: { importLoaders: 1, modules: 1, localIdentName: "[name]__[local]___[hash:base64:5]" }, },{ loader: require.resolve('postcss-loader'), options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ browsers: [ '>1%', 'last 6 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway,' ], remove: false, flexbox: 'no-2009', }), ], }, },{ loader: require.resolve('sass-loader'), options: { outputStyle: 'expanded' } } ], }

Answer 1

我在这个问题上苦苦挣扎，终于找到了解决方案：

只需进入您的node_modules文件夹并找到slick-carousel文件夹
在该文件夹中从光滑的文件夹中找到slick.scss和slick-theme.scss并将其打开
在项目的样式文件夹中创建两个分别名为_slick.scss和_slickTheme.scss的文件
从slick.scss和slick-theme.scss复制所有文件并将它们放入新创建的文件（_slick.scss和_slickTheme.scss）
将它们导入您的app.scss文件
现在，如果您像我一样使用webpack，我猜测您将无法解决'./ajax-loader.gif'错误，并且此后也无法解决字体错误
实际上，slick-carousel会自行使用这些文件，为此，我们可以简单地进入新创建的_slickTheme.scss并找到这些行

/* Slider */

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

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

评论他们

Answer 2

您可能已经错过了：

npm install slick-carousel

Answer 3

您需要具有合适的装载机。将style-loader与css-loader结合使用可用于CSS。使用file-loader和url-loader来加载CSS文件中链接的字体和图像。

(Here are configuration settings for the file-loader)

因此，最后，您的 webpack.config.js 应该包含以下内容：

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: [
                        "@babel/preset-env",
                        "@babel/preset-react"
                    ].map(require.resolve)
                }
            }
        },
        {
            test: /\.css$/,
            use: [
                {loader: "style-loader"},
                {loader: "css-loader"}
            ]
        },
        {
            test: /\.(png|jpg|gif)$/i,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 8192
                    }
                }
            ]
        },
        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'fonts/'
                }
            }]
        }
    ]
},

之后，您可以简单地将样式导入到应用程序入口点（例如 /src/index.js ）：

import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

Answer 4

您还需要为CSS和字体安装slick-carousel。 这就是窍门。干杯...

npm install slick-carousel

然后将css文件导入到App.js文件中。

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

Answer 5

它失败是因为您要在应用程序中导入css模块，而由于使用了slick的样式而无法对其进行缓存。我已经将其固定在我的项目中，如下所示：

在您的style.scss文件中放入

:global {
    @import 'node_modules/slick-carousel/slick/slick';
}

Answer 6

您更改为：

import "slick-carousel/slick/slick.css";

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

删除〜

Answer 7

要导入样式，请确保首先安装了 slick-carousel：

npm install slick-carousel --save

然后：

import "~slick-carousel/slick/slick.css"; 
import "~slick-carousel/slick/slick-theme.css";

<块引用>

注意：但要注意 slick-carousel 对 jQuery 有对等依赖性您或您的同事可能不希望在您的控制台中看到输出，所以你总是可以从那里获取 CSS 并将其转换为您可能正在使用的任何 JS 解决方案中的 CSS。

此信息取自 react-slick documentation page。

Answer 8

您错过了安装光滑轮播的机会。试试这个代码

npm install slick-carousel

Click here for more Details

react-slick：从slick-carousel导入CSS失败

8 个答案: