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

Question

这里是 React 初学者。我的应用程序使用 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

任何 suggestions/clarification 将不胜感激。

更新：从我的 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

它失败了，因为您正在您的应用程序中导入 css 模块，并且没有应用来自 slick 的样式，因为它们正在被缓存。我已经在我的项目中修复了它，如下所示：

在你的 style.scss 文件中放这个

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

Answer 2

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

只需进入 node_modules 文件夹并找到 slick-carousel 文件夹
在 slick 文件夹中找到 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 css 使用，为此我们可以简单地进入您新创建的 _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 3

你需要有合适的装载机。使用 style-loader in combination with css-loader 作为 CSS。使用 file-loader and 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

你可能错过了这个：

npm install slick-carousel

Answer 5

你变成这样:

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

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

删除~

Answer 6

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

首先，安装slick-carousel

 npm install slick-carousel --save

如果你用的是yarn，可以用

 yarn add slick-carousel

然后在您的 App.js 文件中导入 CSS 个文件。

 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";

Note: But be aware slick-carousel has a peer-dependancy on jQuery which you, or your colleagues may not like to see in your console output, so you can always grab the CSS from there and convert it into any CSS in JS solution that you might be using.

此信息来自 react-slick documentation page。

Answer 8

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

npm install slick-carousel

Click here for more Details

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

react-slick: Import CSS from slick-carousel fails

reactjs

css-import

react-slick