कैसे एक रिएक्टर घटक में एक सीएसएस फ़ाइल आयात करने के लिए

Question 1

मैं एक सीएसएस फ़ाइल को एक प्रतिक्रिया घटक में आयात करना चाहता हूं।

मैंने कोशिश की है, import disabledLink from "../../../public/styles/disabledLink";लेकिन मुझे नीचे त्रुटि मिली;

मॉड्यूल नहीं मिला: त्रुटि: 'फ़ाइल' या 'निर्देशिका' को हल नहीं कर सकता .. ..///public/styles/disabledLink में c: \ Users \ User \ Documents \ Pizza-app \ client \ src \ Components @। /client/src/compords/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 उस फ़ाइल का स्थान है जिसे CSS फ़ाइल को आयात करना चाहिए।

मैं क्या गलत कर रहा हूं और मैं इसे कैसे ठीक कर सकता हूं?

Question 2

अगर आपको इसकी आवश्यकता नहीं है, तो आपको इसका नाम भी नहीं देना होगा:

जैसे

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

यहां एक पूरा उदाहरण देखें ( एक प्रतिक्रिया घटक के रूप में एक JSX लाइव कंपाइलर बनाएँ )।

Question 3

वेबपैक के साथ बंडल बनाते समय आपको सीएसएस-लोडर का उपयोग करने की आवश्यकता होती है ।

इसे स्थापित करो:

npm install css-loader --save-dev

और इसे अपने वेबपैक के विन्यास में लोडर में जोड़ें:

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

इसके बाद, आप js में css फाइल्स को शामिल कर पाएंगे।

Question 4

मैं CSS मॉड्यूल का उपयोग करने का सुझाव दूंगा:

प्रतिक्रिया

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

Webpack.config.js में:

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

एक घटक फ़ाइल में:

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

Question 6

ऊपर दिए गए समाधान पूरी तरह से बदल दिए गए हैं और पदावनत हो गए हैं। यदि आप सीएसएस मॉड्यूल का उपयोग करना चाहते हैं (आप आयातित सीएसएस-लोडर मानते हैं) और मैं इसके लिए इतने लंबे समय तक एक जवाब खोजने की कोशिश कर रहा हूं और आखिरकार किया। नए संस्करण में डिफ़ॉल्ट वेबपैक लोडर काफी अलग है।

अपने वेबपैक में, आपको cssRegex से शुरू होने वाले भाग को खोजने और इसे इसके साथ बदलने की आवश्यकता है;

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

एक और-stylesheet.css

.error {
  color: red;
}

Button.js

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 css नियम जोड़ें , css चंक्स निकालें पहले css लोडर css-loader उन्हें html डॉक्युमेंट में एम्बेड करेगा, css-loader और extract-css-chunks-webpack-plugin पैकेज में सुनिश्चित करेगा। json dev निर्भरता

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 नियम हैं जैसे

body {
    background: red;
}

मेरा ऐप टाइपस्क्रिप्ट का उपयोग कर रहा है और यह मेरे लिए काम करता है, स्रोत के लिए मेरे रेपो की जांच करें: https://github.com/nickjohngray/staticbackeditor

Question 12

आप अपनी .cssफ़ाइल को .jsxफ़ाइल में आयात कर सकते हैं

यहाँ एक उदाहरण है -

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