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

Question 1

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

আমি চেষ্টা করেছি 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 সিএসএস ফাইল আমদানি করা উচিত এমন ফাইলের অবস্থান।

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

Question 2

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

যেমন

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

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

Question 3

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

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

npm install css-loader --save-dev

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

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

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

Question 4

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

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

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>

Question 5

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

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

npm install --save-dev style-loader
npm install --save-dev css-loader

ওয়েবপ্যাক.কমফিগ.জেজে:

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

একটি উপাদান ফাইলে:

import './path/to/file.css';

Question 6

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

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

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

Question 7

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

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>;
  }
}

Question 8

স্টাইল লোডার এবং সিএসএস লোডার ইনস্টল করুন:
```
npm install --save-dev style-loader
npm install --save-dev css-loader
```

ওয়েবপ্যাক কনফিগার করুন

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

Question 9

যে ক্ষেত্রে আপনি কেবল স্টাইলশীট থেকে কিছু স্টাইল ইনজেক্ট করতে চান পুরো স্টাইলশীটে ব্যান্ডেলিং না করেই আমি 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`.

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

Question 10

আপনি প্রয়োজনীয় মডিউলটিও ব্যবহার করতে পারেন।

require('./componentName.css');
const React = require('react');

Question 11

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

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

Question 12

আপনি নিজের .cssফাইলটি আমদানি করতে পারেন.jsx ফাইল

এখানে একটি উদাহরণ -

import Content from '../content/content.jsx';