ReactコンポーネントにCSSファイルをインポートする方法

Question 1

CSSファイルをreactコンポーネントにインポートしたい。

試しましimport disabledLink from "../../../public/styles/disabledLink";たが、以下のエラーが発生します。

モジュールが見つかりません：エラー：c：\ Users \ User \ Documents \ pizza-app \ client \ src \ components @の「file」または「directory」../../../ public / styles / disabledLinkを解決できません。 /client/src/components/ShoppingCartLink.js 19：20-66ハッシュ：2d281bb98fe0a961f7c4バージョン：webpack 1.13.2

C:\Users\User\Documents\pizza-app\client\public\styles\disabledLink.css ロードしようとしているCSSファイルの場所です。

私には、インポートが正しいパスを検索していないように見えます。

../../../それで、3つのフォルダーレイヤーの上のパスを検索し始めると思いました。

C:\Users\User\Documents\pizza-app\client\src\components\ShoppingCartLink.js CSSファイルをインポートする必要があるファイルの場所です。

何が間違っているので、どうすれば修正できますか？

Question 2

次のようにする必要がない場合は、名前を付ける必要もありません。

例えば

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

ここで完全な例を参照してください（ReactコンポーネントとしてJSX Liveコンパイラをビルドします）。

Question 3

webpackでバンドルを作成するときは、css-loaderを使用する必要があります。

それをインストールします：

npm install css-loader --save-dev

そして、それをwebpack構成のローダーに追加します。

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

この後、jsにcssファイルを含めることができるようになります。

Question 4

CSSモジュールの使用をお勧めします。

React

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

以下は、Reactコンポーネントに外部CSSファイルをインポートし<head />、WebサイトのCSSルールを出力します。

スタイルローダーとCSSローダーをインストールします。

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

上記のソリューションは完全に変更され、非推奨になりました。CSSモジュールを使用したい場合（css-loadersをインポートしたと仮定）、私はこれに対する答えを長い間見つけようとしていて、ついにそうしました。デフォルトのwebpackローダーは新しいバージョンではかなり異なります。

Webpackで、cssRegexで始まるパーツを見つけて、これに置き換える必要があります。

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

Question 7

CSSモジュールを使用すると、名前の衝突を気にすることなく、異なるファイルで同じCSSクラス名を使用できます。

Button.module.css

.error {
  background-color: red;
}

another-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

スタイルローダーとCSSローダーをインストールします。
```
npm install --save-dev style-loader
npm install --save-dev css-loader
```

webpackを構成する

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`.

注：私はこのライブラリの作成者であり、スタイルとCSSモジュールの大量インポートが最善または最も実行可能なソリューションではない場合のために作成しました。

Question 10

必要なモジュールを使用することもできます。

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

Question 11

extract-css-chunks-webpack-pluginとcss-loaderloaderを使用すると、以下を参照してください。

webpack.config.jsインポートextract-css-chunks-webpack-plugin

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

webpack.config.js cssルールを追加し、最初にcssチャンクを抽出してからcssローダーcss-loaderがそれらをhtmlドキュメントに埋め込み、css-loaderとextract-css-chunks-webpack-pluginがpackage.jsondevにあることを確認します依存関係

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

私のアプリはtypescriptを使用しており、これは私のために機能します。ソースのリポジトリを確認してください：https： //github.com/nickjohngray/staticbackeditor

Question 12

.cssファイルを.jsxファイルにインポートできます

ここに例があります-

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