response-slick: не удается импортировать CSS из slick-carousel

Question

response-slick: не удается импортировать CSS из slick-carousel

Реактив новичка здесь. Мое приложение использует create-реагировать-приложение, и я вытягиваю реагирующее пятно для карусели. Я пытаюсь следовать указаниям, которые указаны в настройке для реакции-слика, но следующее не работает для меня:

@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'

Это работает, если я добавляю css в index.html из CDN, но я бы предпочел избежать этого сетевого вызова, так как считаю, что это влияет на рендеринг страницы при начальной загрузке.

Я попытался следовать инструкциям по настройке create-реагировать-app для использования относительных путей, но у меня это тоже не сработало. Может быть, я совершенно не понимаю, но я подумал, что обозначение ~ позволит мне импортировать scss из пакета в / node_modules.

Любые предложения / разъяснения будут с благодарностью.

Обновление: добавление установки из моего файла webpack.config (большая часть которого является настройкой по умолчанию из create-реагировать-приложение).{ 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' } } ], }

27

reactjs react-slick css-import

Источник

user1311287 14 фев '18 в 03:33

9 ответов

Другие вопросы по тегам reactjs react-slick css-import

user10417221 30 апр '19 в 09:59 2019-04-30 09:59 · Answer 1 · 2019-04-30 09:59

Вы меняете на это:

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

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

удалить ~

66

Источник

user10417221 30 апр '19 в 09:59

user6197250 17 янв '19 в 08:58 2019-01-17 08:58 · Answer 2 · 2019-01-17 08:58

Вы могли пропустить это:

npm install slick-carousel

49

Источник

user6197250 17 янв '19 в 08:58

user9266400 20 ноя '19 в 15:35 2019-11-20 15:35 · Answer 3 · 2019-11-20 15:35

Вам также необходимо установить slick-carousel для CSS и шрифтов. Вот в чем фокус. Ура...

npm install slick-carousel --save

Затем импортируйте файлы css в файл App.js.

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

34

Источник

user9266400 20 ноя '19 в 15:35

user5354341 07 авг '18 в 12:20 2018-08-07 12:20 · Answer 4 · 2018-08-07 12:20

Я боролся с этой проблемой, и я, наконец, нашел решение:

просто зайдите в свой node_modules папку и найти slick-carousel папка
внутри этой находки slick.scss а также slick-theme.scss из гладкой папки и откройте их
создать два отдельных файла с именами _slick.scss а также _slickTheme.scss внутри ваших папок стиля вашего проекта
скопировать все из slick.scss а также slick-theme.scss и поместите их в свои недавно созданные файлы (_slick.scss а также _slickTheme.scss)
импортировать их в свой app.scssфайл
теперь, если вы используете веб-пакет, как я, я думаю, что вы не можете решить './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;
    }
}

закомментируйте их

user4774747 18 сен '18 в 16:38 2018-09-18 16:38 · Answer 5 · 2018-09-18 16:38

Вам нужно иметь соответствующие грузчики. Используйте style-loader в сочетании с css-loader для CSS. Используйте file-loader и url-loader для загрузки шрифтов и изображений, связанных в файлах CSS.

(Вот настройки конфигурации для загрузчика файлов)

Итак, в конце ваш 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';

user9840345 04 июн '21 в 20:30 2021-06-04 20:30 · Answer 6 · 2021-06-04 20:30

You are missed installing a slick carousel. try this code

      npm install slick-carousel

Click here for more Details

1

Источник

user9840345 04 июн '21 в 20:30

user9061311 21 июн '18 в 09:31 2018-06-21 09:31 · Answer 7 · 2018-06-21 09:31

Сбой из-за того, что вы импортируете модули css в свое приложение, а стили из slick не применяются, потому что они кэшируются. Я исправил это в моем проекте, как показано ниже:

В ваших файлах style.scss поместите это

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

1

Источник

user9061311 21 июн '18 в 09:31

erff-on 05 фев '23 в 07:40 2023-02-05 07:40 · Answer 8 · 2023-02-05 07:40

вам нужно установитьreact-slickCSS-файлы без~подпишите так:

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

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

и вам нужно импортировать их также в компонент, который показывает ваш слайдер

например, если у вас есть **компонент слайдера**, который будет использоваться в компоненте Home , вам также необходимо импортировать гладкие файлы CSS в Home. это сработало для меня.

и если вы меняете направление наrtl, вам нужно использоватьltrдля слайдера

и проверитьslick-carouselбыть установленным

user14247883 22 фев '21 в 10:19 2021-02-22 10:19 · Answer 9 · 2021-02-22 10:19

Чтобы импортировать стили, убедитесь, что вы сначала установили slick-carousel:

      npm install slick-carousel --save

чем:

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

Примечание: но имейте в виду, что slick-carousel имеет одноранговую зависимость от jQuery, которую вам или вашим коллегам может не понравиться в выводе консоли, поэтому вы всегда можете получить оттуда CSS и преобразовать его в любое решение CSS в JS, которое вы можете использовать.

Эта информация была взята со страницы документации response-slick .