سلام.
زمانی که به فایل css رو داخل فایل js در پروژه reactjs . ایمپورت میکنم با ارور زیر مواجه میشم .
ERROR in ./public/styleTest.css
Module parse failed: Unexpected token (۱:۵)
You may need an appropriate loader to handle this file type.
| body {
| background-color: red;
| }
سه فایل webpack دارم که یکی برای server هستش و یکی برای client و یکی هم base هستش که مشترک بین اون ۲ فایل merge شده.
webpack.base.js :
module.exports = {
context: __dirname,
module: {
rules: [
{
test: /.(pdf|ico|jpg|eot|otf|woff۲|woff|ttf|mp۴|webm)$/,
exclude: /node_modules/,
use: {
loader: 'file-loader',
query: {name: '[name].[ext]'},
},
},
{
test: /.(js|jsx)?$/,
loader: "babel-loader",
exclude: /node-modules/,
options: {
presets: [
["es۲۰۱۵", {"modules": false}],
'react', 'stage-۰', 'stage-۲',
["env", {
targets: {browsers: ['last ۲ versions ']}
}]
]
}
},
{
test: /.css$/,
include: /node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {modules: true, sourceMap: true}
}
]
},
{
test: /.s[ac]ss$/,
exclude: /node_modules/,
use: ['style-loader',
{
loader: 'css-loader',
options: {modules: true, sourceMap: true}
},
'sass-loader'
]
}
]
}
};
و همین طور فایل package.json هم به شکل زیر هستش :
"devDependencies": {
"babel-cli": "^۶.۲۶.۰",
"babel-core": "^۶.۲۶.۰",
"babel-loader": "^۷.۱.۲",
"babel-preset-env": "^۱.۶.۱",
"babel-preset-es۲۰۱۵": "^۶.۲۴.۱",
"babel-preset-latest": "^۶.۲۴.۱",
"babel-preset-react": "^۶.۲۴.۱",
"babel-preset-stage-۰": "^۶.۲۴.۱",
"babel-preset-stage-۲": "^۶.۲۴.۱",
"css-loader": "^۰.۲۸.۹",
"file-loader": "^۱.۱.۸",
"node-sass": "^۴.۷.۲",
"npm-run-all": "^۴.۱.۲",
"sass-loader": "^۶.۰.۶",
"style-loader": "^۰.۱۸.۲",
"uglifyjs-webpack-plugin": "^۱.۲.۰",
"webpack": "^۳.۱۱.۰",
"webpack-node-externals": "^۱.۶.۰"
}
ممنون میشم از دوستان راهنماییم کنن.
از روش create-react-app عمل کنید تا به چنین مشکل های نخورید .
البته نیاز به بررسیه wepback تون هست . فرصت شد حتما بررسی میکنم
سلام .
دلیل استفاده نکردن از create-react-app این هست که یکسری محدودیت ها ایجاد میکرد . برای همین تصمیم گرفتم در محیط آزاد پروژه رو بنویسم.
در مورد webpack هم من سه فایل دارم و اون موردی که مربوط به تنظیمات css-loader میشه رو کامل انجام دادم . اما باز به مشکل بر میخورم !!!
در دیسکورد مطرح کردم و یکسری از برنامه نویسان اون رو دیدن و میگفتن نباید مشکلی باشه !!!! ولی مشکلی هست :(
webpack.base.js is common file
module.exports = {
context: __dirname,
module: {
rules: [
{
test: /.(pdf|ico|jpg|eot|otf|woff2|woff|ttf|mp4|webm)$/,
exclude: /node_modules/,
use: {
loader: 'file-loader',
query: {name: '[name].[ext]'},
},
},
{
test: /.(js|jsx)?$/,
exclude: /node-modules/,
use: [
"babel-loader"
],
},
{
test: /.css$/,
include: /node_modules/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {modules: true, sourceMap: true}
}
]
},
{
test: /.s[ac]ss$/,
exclude: /node_modules/,
use: ['style-loader',
{
loader: 'css-loader',
options: {modules: true, sourceMap: true}
},
'sass-loader'
]
}
]
}
};
and webpack.client.js
const webpack = require("webpack");
const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const config = {
entry: "./src/client/client.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "public")
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
}
})
]
};
module.exports = merge(baseConfig, config);
and webpack.server.js
const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const nodeExternals = require('webpack-node-externals');
const config = {
target : "node",
entry : "./src/server.js",
output : {
filename : "bundle.js",
path : path.resolve(__dirname, "build")
},
externals: [nodeExternals()]
};
module.exports = merge( baseConfig, config );
و همینطور فایل css رو به صورت زیر در کامپوننت اصلی کانتینر ایمپورت کردم :
import '../../../public/styleTest.css';
ممنون میشم اگر کسی میتونه راهنمایی داشته باشه .
زمانی که include: 'node_modules را حذف میکنم و بجای آن هیچ چیزی نمیزارم و یا بجای آن exclude: /node-modules/,
میزارم با ارور دیگری مواجه میشم .
return window && document && document.all && !window.atob;
^
ReferenceError: window is not defined
من فکر میکنم که باید global.window
از یک راهی مثل این . ارور رو رفع کرد . اما چطوری را نمیدونم !
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟