web developer
4 سال پیش توسط web developer مطرح شد
4 پاسخ

نحوه استفاده از Owl Carousel 2 در Webpack

سلام
من میخواهم از کتابخانه Owl Carousel 2 استفاده کنم.طبق گفته های صفحه زیر همه کار هارا انجام دادم:
https://www.npmjs.com/package/owl.carousel

اما زمانی که owl.carousel.css را ایمپورت میکنم خطا میده، من فایل CSS این کتابخانه را در صفحه ای که تمام فایل های CSS و SCSS ایمپورت میشوند قرار دادم تا وب پک تمام فایل هارا یکی کند.

Main.scss

@import "_scss/variable";
@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~owl.carousel/dist/assets/owl.carousel.css';
@import "my_css.css";

index.js

import 'owl.carousel';
import './js/custom.js';

webpack.config.js

...
plugins:
new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
...

Custom.js

    rtl:true,
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
});

خطا نمایش داده شده:

ERROR in ./src/styles/main.scss
Module build failed: ModuleParseError: Module parse failed: Unexpected character '?' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
    at handleParseError (E:\Localhost\v563\htdocs\webpack-wordpress\wp-content\themes\wordpress-starter-theme\node_modules\webpack\lib\NormalModule.js:385:19)
    at doBuild.err (E:\Localhost\v563\htdocs\webpack-wordpress\wp-content\themes\wordpress-starter-theme\node_modules\webpack\lib\NormalModule.js:419:5)
    at runLoaders (E:\Localhost\v563\htdocs\webpack-wordpress\wp-content\themes\wordpress-starter-theme\node_modules\webpack\lib\NormalModule.js:280:12)
    at E:\Localhost\v563\htdocs\webpack-wordpress\wp-content\themes\wordpress-starter-theme\node_modules\loader-runner\lib\LoaderRunner.js:370:3
    at iterateNormalLoaders (E:\Localhost\v563\htdocs\webpack-wordpress\wp-content\themes\wordpress-starter-theme\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
    at Array.<anonymous> (E:\Localhost\v563\htdocs\webpack-wordpress\wp-content\themes\wordpress-starter-theme\node_modules\loader-runner\lib\LoaderRunner.js:202:4)
    at Storage.finished (E:\Localhost\v563\htdocs\webpack-wordpress\wp-content\themes\wordpress-starter-theme\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:43:16)
    at provider (E:\Localhost\v563\htdocs\webpack-wordpress\wp-content\themes\wordpress-starter-theme\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:79:9)
    at E:\Localhost\v563\htdocs\webpack-wordpress\wp-content\themes\wordpress-starter-theme\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)
 @ ./src/index.js 11:12-41

خیلی در گوگل سرچ کردم:

Module build failed: ModuleParseError: Module parse failed: Unexpected character '?' (1:0)

ولی به جوابی نرسیدم، زمانی که این فایل CSS را به صورت مستقیم ایمپورت میکنم (خارج از وب پک) به درستی کار میکند.
ممنون میشوم راهنمایی بفرمایید


تگ‌های محبوب
لاراول
php
laravel
متفرقه
reactjs
عمومی
html_css
nodejs
vuejs
وردپرس
پایتون
css
فلاتر
react
javascript
ثبت پرسش جدید
حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 4 سال پیش آپدیت شد
0

داستان هندل کردن فونت ها رو انجام دادین ؟
متاسفانه از اون دسته از ارورهاست که ادم خودش باید دسته پنجه نرم کنه باهاش تا راحل رو پیدا کنه


سیدعلی موسوی
تخصص : سی شارپ و پی اچ پی
@juza66 4 سال پیش آپدیت شد
1

سلام در کانفیگ وب پک کد زیر رو قرار بدید سرچ کردم یحتمل مشکل لود کردن فونت هاس

{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }

web developer
تخصص : درحال یادگیری ...
@webeveloper 4 سال پیش مطرح شد
0

من فون هارا در Webpack قرار ندادم، در فایل دیگه ای ایمپورت میکنم به صفحه.
الان می بینم که در owl.carousel چند عکس هم وجود دارد، باید برای این هم لودر جدا نوشت ؟
کد پیشنهادی Juza66 زدم ولی نشد

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const webpack = require('webpack');

module.exports = {
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader", options: {
                        sourceMap: true
                    }
                    },
                    "postcss-loader",
                {
                    loader: "sass-loader", options: {
                        sourceMap: true
                    }
                }
                ]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            },

        ]
    },
    plugins: [

        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),

    ],

};

web developer
تخصص : درحال یادگیری ...
@webeveloper 4 سال پیش مطرح شد
0

ممنون از @juza66
جواب داد:

{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }

باید لودر Url نصب میکردم:

npm install --save-dev url-loader

سوال اینجا هست که در CSS این کتابانه 2 فایل عکس آدرس دهی شده. زمان آپلود چجوری این تصاویر را انتقال دهیم چون توی فولدر Dist وجود نداره.
یعنی ما هر پکیجی که نصب میکنیم همراه خودش ممکنه عکس هم داشته باشه، این تصاویر با build گرفتم در Webpack به فولدر Dist منتقل میشود ؟

ممنون میشوم در این خصوص هم راهنمایی کنید


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام