প্রতিক্রিয়া উপাদানগুলিতে কীভাবে একটি সিএসএস ফাইল আমদানি করবেন


98

আমি একটি প্রতিক্রিয়া উপাদানটিতে একটি সিএসএস ফাইল আমদানি করতে চাই।

আমি চেষ্টা করেছি import disabledLink from "../../../public/styles/disabledLink";কিন্তু নীচে ত্রুটি পেয়েছি;

মডিউল পাওয়া যায় নি: ত্রুটি: 'ফাইল' বা 'ডিরেক্টরি' সমাধান করতে পারে না ../../../public/styles/dis اهل লিঙ্ক সি: \ ব্যবহারকারী \ ব্যবহারকারী \ দস্তাবেজগুলি \ পিজা-অ্যাপ \ ক্লায়েন্ট \ src \ উপাদানগুলি @। /client/src/components/ShoppingCartLink.js 19: 20-66 হ্যাশ: 2d281bb98fe0a961f7c4 সংস্করণ: ওয়েবপ্যাক 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css আমি লোড করার চেষ্টা করছি সিএসএস ফাইলের অবস্থান।

আমার কাছে দেখে মনে হচ্ছে আমদানি সঠিক পথটি খুঁজছে না।

আমি ভেবেছিলাম ../../../এটি দিয়ে উপরে তিনটি ফোল্ডার স্তর উপরে পথ সন্ধান করা শুরু হবে।

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js সিএসএস ফাইল আমদানি করা উচিত এমন ফাইলের অবস্থান।

আমি কী ভুল করছি এবং আমি কীভাবে এটি ঠিক করতে পারি?


আরে কী
এসসিআর

আরে, আপনি ঠিক বলেছেন তবে এটি এখনও কাজ করে না। আমি লক্ষ্য করেছি যে আমি আমদানিটি ব্যবহার করতে পারি না, কারণ আমি কোনও সিএসএস ফাইলের মধ্যে রফতানি ব্যবহার করতে পারি না
ভেন্টার

এই ভাবে ব্যবহার stackoverflow.com/questions/39926493/...
Anson

আমি ত্রুটি পাচ্ছি -> @ মিডিয়া কেবলমাত্র স্ক্রিন এবং (সর্বনিম্ন প্রস্থ: 320 পিক্স) এবং (সর্বাধিক প্রস্থ: 640 পিক্স) {nt সিনট্যাক্স এরর: মডিউল.অনুষ্ঠানিকভাবে অবৈধ বা অপ্রত্যাশিত টোকেন (অভ্যন্তরীণ / মডিউল / সিজেএস / লোডার.জেএস: 723) : 23)
সদানন্দ 3'20

উত্তর:


159

আপনার যদি প্রয়োজন না হয় তবে আপনাকে এটির নামকরণও করতে হবে না:

যেমন

import React from 'react';
import './App.css';

এখানে একটি সম্পূর্ণ উদাহরণ দেখুন ( একটি প্রতিক্রিয়া উপাদান হিসাবে একটি জেএসএক্স লাইভ সংকলক তৈরি করুন )।


4
আমার পক্ষে কাজ করে না, যখন আমি বাচাল রেজিস্টার দিয়ে মোচা চালানোর চেষ্টা করি তখন আমি পাই ... আমি: \ .... সিএসএস: 1 (ফাংশন (রফতানি, প্রয়োজনীয়, মডিউল, __ ফাইলিনাম, __dirname)) f ফিল্টার-বিজি {
সিনট্যাক্স এরর

4
অথবা, রিএ্যাক্ট-হেলমেট ব্যবহার করুন এবং <হেড> ট্যাগটিতে CSS (যদি এটির url হয়) ইনজেক্ট করুন
কিরা

53

ওয়েবপ্যাকের সাথে বান্ডিল তৈরি করার সময় আপনাকে সিএসএস-লোডার ব্যবহার করতে হবে ।

এটি ইনস্টল করুন:

npm install css-loader --save-dev

এবং এটি আপনার ওয়েবপ্যাক কনফিগারেশনে লোডারগুলিতে যুক্ত করুন:

module.exports = {
  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" },
      // ...
    ]
  }
};

এর পরে, আপনি সিএসএস ফাইলগুলিকে জেএসে অন্তর্ভুক্ত করতে সক্ষম হবেন।


4
আমাকে এই প্রকল্পে অন্য একটি মডিউল আমদানি করার অনুমতি নেই। তাদের অন্য সমাধানটি কি কেবল রিএ্যাকটিজ বা নেটিভ জেএস নিয়ে কাজ করছে?
ভেন্টার

সুতরাং আমি মনে করি আমাকে এর মতো কিছু ব্যবহার করতে হবে: HTMLElement.style
ভেন্টার

দেখতে কিছুটা কুৎসিত লাগছে। কেন আপনাকে বান্ডিল বিল্ডিংয়ে পরিবর্তন যুক্ত করার অনুমতি দেওয়া হচ্ছে না?
আলেকজান্ডার লাজেরেভ

এটি রিএ্যাকটিজগুলি সম্পর্কে একটি ওয়ার্কশপের জন্য পোস্ট প্রসেসিং এবং আমাদের কর্মশালার সময় অন্তর্ভুক্ত মডিউলগুলির সাথে প্রয়োজনীয়তাগুলি সমাধান করতে বলা হয়েছে
ভেন্টার

ঠিক আছে, তবে কেবল উল্লেখ করতে চেয়েছিলেন যে স্টাইল ট্যাগ আনার ফলে আপনি আপনার প্রশ্নে যেমন জিজ্ঞাসা করেছেন তেমন CSS ফাইল আমদানি করছে না । এটি 2 টি ভিন্ন সমস্যা।
আলেকজান্দ্র লেজারেভ

32

আমি সিএসএস মডিউলগুলি ব্যবহার করার পরামর্শ দেব:

প্রতিক্রিয়া

import React from 'react';
import styles from './table.css';

export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
                <div className={styles.cell}>A0</div>
                <div className={styles.cell}>B0</div>
            </div>
        </div>;
    }
}

উপাদানটি রেন্ডারিং:

<div class="table__table___32osj">
    <div class="table__row___2w27N">
        <div class="table__cell___2w27N">A0</div>
        <div class="table__cell___1oVw5">B0</div>
    </div>
</div>

আমি নীচের উত্তর হিসাবে অংশ 1 যোগ করব। এবং আপনি আমার উপাদান অনুসরণ করতে পারেন আপনার উপাদান পরীক্ষা।
মিহির প্যাটেল

4
যদি এটি চেষ্টা করে দেখায় এবং এটি কার্যকর হয় না। আমি এটি এটির মতো অন্তর্ভুক্ত করার চেষ্টা করেছি: import styles from "./disabledLink.css";এবং নিম্নলিখিত ত্রুটিটি পেয়েছি: মডিউলটি পাওয়া যায় নি: ত্রুটি: 'ফাইল' বা 'ডিরেক্টরি' র সমাধান করতে পারছে না d \ ক্লায়েন্ট \ এসআরসি @ উপাদানগুলি @ ./client/src/components/ShoppingCartLink.js 19: 20-49
ভেন্টার

4
সিএসএস মডিউলগুলি পৃথকভাবে ইনস্টল করা উচিত, github.com/css-modules/css-modules
আলেকজান্ডার

4
এবং এই জাতীয় টাইপ সিএসএস, কোনও আইডিয়ার জন্য আমি কীভাবে মিডিয়া কোয়েরি লিখতে পারি?
সোনু বামনিয়া

18

নিম্নলিখিতগুলি একটি প্রতিক্রিয়া উপাদানটিতে একটি বাহ্যিক সিএসএস ফাইল আমদানি করে <head />এবং ওয়েবসাইটের সিএসএস বিধিগুলিকে আউটপুট করে ।

  1. স্টাইল লোডার এবং সিএসএস লোডার ইনস্টল করুন :
npm install --save-dev style-loader
npm install --save-dev css-loader
  1. ওয়েবপ্যাক.কমফিগ.জেজে:
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}
  1. একটি উপাদান ফাইলে:
import './path/to/file.css';

এবং আমি প্রহরী চালানোর জন্য ব্যাবেল ব্যবহার করি। হতে পারে এটি ওয়েবপ্যাক.কনফিগ.জেএস ফাইলটি
একেবারেই দেখেনি

আপনি কি সিএসএস-লোডার ইনস্টল করেছেন? এছাড়াও আমি আপনার ওয়েবপ্যাক.কনফিগ.জেএস দেখতে পাচ্ছি না।
ওয়েবার্স

4
rulesঅ্যারের মান হিসাবে আপনি অবজেক্ট ফর্ম্যাটে আরও মডিউল নিয়ম যুক্ত করতে পারেন ।
এরি

4

উপরের সমাধানগুলি সম্পূর্ণরূপে পরিবর্তিত এবং হ্রাস করা হয়েছে। আপনি যদি সিএসএস মডিউলগুলি ব্যবহার করতে চান (আপনি সিএসএস-লোডার আমদানি করে ধরে নিচ্ছেন) এবং আমি এর দীর্ঘ সময় ধরে এর উত্তর খুঁজে পাওয়ার চেষ্টা করছি এবং অবশেষে করেছি। নতুন সংস্করণে ডিফল্ট ওয়েবপ্যাক লোডারটি একেবারেই আলাদা।

আপনার ওয়েবপ্যাকে, আপনাকে সিএসআরিজেক্স দিয়ে শুরু করে একটি অংশ সন্ধান করতে হবে এবং এটির সাথে এটি প্রতিস্থাপন করতে হবে;

{
  test: cssRegex,
  exclude: cssModuleRegex,
  use: getStyleLoaders({
      importLoaders: 1,
      modules: true,
      localIdentName: '[name]__[local]__[hash:base64:5]'
  }),
}


2

সিএসএস মডিউলগুলি সংঘর্ষের নামকরণ না করে আপনাকে বিভিন্ন ফাইলে একই সিএসএস শ্রেণির নাম ব্যবহার করতে দেয়।

Button.module.css

.error {
  background-color: red;
}

অন্য-স্টাইলশীট। CSS

.error {
  color: red;
}

বাটন.জেএস

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet
class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

1
  1. স্টাইল লোডার এবং সিএসএস লোডার ইনস্টল করুন:

    npm install --save-dev style-loader
    npm install --save-dev css-loader
    
  2. ওয়েবপ্যাক কনফিগার করুন

    module: {
            loaders: [
                {
                    test: /\.css$/,
                    loader: 'style-loader'
                }, {
                    test: /\.css$/,
                    loader: 'css-loader',
                    query: {
                        modules: true,
                        localIdentName: '[name]__[local]___[hash:base64:5]'
                    }
                }
            ]
        }
    

0

যে ক্ষেত্রে আপনি কেবল স্টাইলশীট থেকে কিছু স্টাইল ইনজেক্ট করতে চান পুরো স্টাইলশীটে ব্যান্ডেলিং না করেই আমি https://github.com/glortho/styled-import এর প্রস্তাব দিই । উদাহরণ স্বরূপ:

const btnStyle = styledImport.react('../App.css', '.button')

// btnStyle is now { color: 'blue' } or whatever other rules you have in `.button`.

দ্রষ্টব্য: আমি এই লিবের লেখক এবং আমি এটি এমন ক্ষেত্রে তৈরি করেছি যেখানে স্টাইল এবং সিএসএস মডিউলগুলির প্রচুর আমদানি সর্বোত্তম বা সবচেয়ে কার্যকর সমাধান নয়।



0

আমার জন্য এক্সট্রাক্ট-সিএসএস-খণ্ডস-ওয়েবপ্যাক-প্লাগইন এবং সিএসএস-লোডার লোডার কাজ ব্যবহার করে, নীচে দেখুন:

webpack.config.js আমদানি এক্সট্রাক্ট-সিএসএস-খণ্ড-ওয়েবপ্যাক-প্লাগইন

const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');

webpack.config.js সিএসএস বিধি যুক্ত করুন , প্রথমে সিএসএস অংশগুলি এক্সট্রাক্ট করুন তারপর সিএসএস লোডার সিএসএস-লোডার তাদের এইচটিএমএল নথিতে এম্বেড করবে, সিএসএস-লোডার এবং এক্সট্র্যাক্ট-সিএসএস-খণ্ডস-ওয়েবপ্যাক-প্লাগইনটি প্যাকেজ.জেসন ডিভ-ইন রয়েছে নির্ভরতা

rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: ExtractCssChunks.loader,
          },
          'css-loader',
        ],
      }
]

webpack.config.js প্লাগইনটির উদাহরণ তৈরি করুন

plugins: [
    new ExtractCssChunks({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]

এবং এখন CSS আমদানি করা সম্ভব এবং এখন index.tsx এর মতো একটি tsx ফাইলে আমি এই আমদানি './Tree.css' এর মতো আমদানিও ব্যবহার করতে পারি যেখানে Tree.css এ CSS এর মতো নিয়ম রয়েছে where

body {
    background: red;
}

আমার অ্যাপ্লিকেশনটি টাইপস্ক্রিপ্ট ব্যবহার করছে এবং এটি আমার জন্য কাজ করে, উত্সটির জন্য আমার রেপোটি পরীক্ষা করুন: https://github.com/nickjohngray/staticbackeditor


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.