Ошибка при подключении Owl-carousel

192
15 марта 2018, 11:14

Не удаётся подключить карусель в проект. Сделал всё как здесь: https://github.com/OwlCarousel2/OwlCarousel2 webpack:

const path = require('path');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
module.exports = {
    devtool: 'source-map',
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: 'public/'
    },
    devServer: {
        contentBase: [path.join(__dirname, 'src'), path.join(__dirname, 'public')],
        watchContentBase: true,
        hotOnly: true,
        stats: "errors-only"
    },
    module: {
        rules: [
            {
                test: /\.js/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['env', 'react']
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [{
                    loader: 'style-loader' // creates style nodes from JS strings
                }, {
                    loader: 'css-loader' // translates CSS into CommonJS
                }, {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                autoprefixer({
                                    browsers:['ie >= 8', 'last 4 version']
                                })
                            ],
                            sourceMap: true
                        }
                    },
                    {
                    loader: 'sass-loader' // compiles Sass to CSS
                }]
            },
            {
                test: /\.(jpe?g|png|gif|mp3)$/i,
                include: path.resolve(__dirname, 'src'),
                loaders: ['file-loader']
            }, {
                test: /\.ico$/,
                include: path.resolve(__dirname, 'src'),
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]'
                        }
                    }
                ]
            }, {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                include: path.resolve(__dirname, 'src'),
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1000,
                            mimetype: 'application/font-woff'
                        }
                    }
                ]
            }, {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                include: path.resolve(__dirname, 'src'),
                loader: 'file-loader'
            }]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
    ],
};

В index.js добавил:

import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
import 'owl.carousel';

В консоле такая ошибка:

ERROR in ./node_modules/owl.carousel/dist/assets/owl.theme.default.css
Module parse failed: Unexpected token (9:0)
You may need an appropriate loader to handle this file type.
|  *    Default theme - Owl Carousel CSS File
|  */
| .owl-theme .owl-nav {
|   margin-top: 10px;
|   text-align: center;
 @ ./src/index.js 15:0-57
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js
ERROR in ./node_modules/owl.carousel/dist/assets/owl.carousel.css
Module parse failed: Unexpected token (9:0)
You may need an appropriate loader to handle this file type.
|  *  Owl Carousel - Core
|  */
| .owl-carousel {
|   display: none;
|   width: 100%;
 @ ./src/index.js 13:0-52
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./src/index.js

Зависимости:

"dependencies": {
    "bootstrap": "^4.0.0",
    "isotope-layout": "^3.0.5",
    "jquery": "^3.3.1",
    "owl.carousel": "^2.3.2",
    "pe7-icon": "^1.0.4",
    "popper.js": "^1.14.0"
  },
READ ALSO
Баг в bootstrap, как пофиксить?

Баг в bootstrap, как пофиксить?

Добрый вечер! В Bootstrap есть такая функция как data-size , которая определяет, сколько строк выводить при нажатии на выпадающий списокСуть бага вот...

149
Смена метки при наведении мышью вне карты

Смена метки при наведении мышью вне карты

Добавил метки на карту в кластере

159
Интеграция symfony c 1C

Интеграция symfony c 1C

Доброго времени суток, появилась задача интегрировать 1C управление торговлей 11,4 с сайтом на symfonyИли есть возможность подключения к базе...

179
Выборка MYSQL по условию из связной таблицы (YII2)

Выборка MYSQL по условию из связной таблицы (YII2)

Добрый день, помогите сделать выборку между связующими таблицами, к примеру есть две таблицы

213