آفلاین
user-avatar

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

3 سال پیش
توسط web developer آپدیت شد
آفلاین
user-avatar
web developer ( 4752 تجربه )
3 سال پیش
تخصص : درحال یادگیری ...

سلام
من میخواهم از کتابخانه 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 را به صورت مستقیم ایمپورت میکنم (خارج از وب پک) به درستی کار میکند.
ممنون میشوم راهنمایی بفرمایید

آفلاین
user-avatar
حسام موسوی ( 403896 تجربه )
3 سال پیش
تخصص : طراح و برنامه نویس

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

آفلاین
user-avatar
سیدعلی موسوی ( 113203 تجربه )
3 سال پیش
تخصص : سی شارپ و پی اچ پی

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

{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
آفلاین
user-avatar
web developer ( 4752 تجربه )
3 سال پیش
تخصص : درحال یادگیری ...

من فون هارا در 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'
        }),

    ],

};
آفلاین
user-avatar
web developer ( 4752 تجربه )
3 سال پیش
تخصص : درحال یادگیری ...

ممنون از @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 منتقل میشود ؟

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

برای ارسال پاسخ باید وارد سایت شوید