description

دریافت Error در زمان import فایل css درون appJS

- 4 ماه پیش
توسط احسان آپدیت شد
احسان ( 231 تجربه )
4 ماه پیش

سلام.
زمانی که به فایل 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": "^۱.۶.۰"
  }

ممنون میشم از دوستان راهنماییم کنن.

حسام موسوی ( 49229 تجربه )
4 ماه پیش

از روش create-react-app عمل کنید تا به چنین مشکل های نخورید .
البته نیاز به بررسیه wepback تون هست . فرصت شد حتما بررسی میکنم

احسان ( 231 تجربه )
4 ماه پیش

سلام .
دلیل استفاده نکردن از 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';

ممنون میشم اگر کسی میتونه راهنمایی داشته باشه .

احسان ( 231 تجربه )
4 ماه پیش

زمانی که include: 'node_modules را حذف میکنم و بجای آن هیچ چیزی نمیزارم و یا بجای آن exclude: /node-modules/, میزارم با ارور دیگری مواجه میشم .

        return window && document && document.all && !window.atob;
        ^

ReferenceError: window is not defined
احسان ( 231 تجربه )
4 ماه پیش

من فکر میکنم که باید global.window از یک راهی مثل این . ارور رو رفع کرد . اما چطوری را نمیدونم !

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