سلام
من میخواهم از کتابخانه 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 را به صورت مستقیم ایمپورت میکنم (خارج از وب پک) به درستی کار میکند.
ممنون میشوم راهنمایی بفرمایید
داستان هندل کردن فونت ها رو انجام دادین ؟
متاسفانه از اون دسته از ارورهاست که ادم خودش باید دسته پنجه نرم کنه باهاش تا راحل رو پیدا کنه
سلام در کانفیگ وب پک کد زیر رو قرار بدید سرچ کردم یحتمل مشکل لود کردن فونت هاس
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
من فون هارا در 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'
}),
],
};
ممنون از @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 منتقل میشود ؟
ممنون میشوم در این خصوص هم راهنمایی کنید
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟