web-dev-qa-db-ja.com

反応コンソールにCSSファイルをインポートする方法？

タイトルが言うように、私は反応ファイルにCSSファイルをインポートしたいと思います。私は以下を試しました：

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

私にとっては、インポートが正しいパスを探していないようです。 ../../../を使うと、上の3つのフォルダレイヤーのパスを調べ始めると思いました。

CSSファイルをインポートするファイルは次の場所にあります。

C：¥Users¥User¥Documents¥pizza-app¥client¥src¥components¥ShoppingCartLink.js

ご意見ありがとうございます。

javascripthtmlcssreactjs
55
venter

あなたがする必要がないのなら、あなたもそれに名前を付ける必要はありません。

例えば.

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

完全な例はこちら https://egghead.io/lessons/build-a-jsx-live-compiler

98
Jonathan Caballero

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

それをインストールしてください。

npm install css-loader --save-dev

そしてそれをあなたのwebpack設定のローダーに追加してください。

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

この後、あなたはjsにcssファイルを含めることができるでしょう。

44
Alexandr Lazarev

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>
22
Mihir Patel

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

  1. スタイルローダー および CSSローダー をインストールします。
npm install --save-dev style-loader
npm install --save-dev css-loader
  1. Webpack.config.jsで：
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}
  1. コンポーネントファイルで：
import './path/to/file.css';
12
Webars

  1. Style LoaderとCSS Loaderをインストールします。npm install --save-dev style-loader npmインストール--save-dev css-loader

  2. ウェブパックを設定する

モジュール：{ローダー：[{テスト：/.css$ /、ローダー： 'スタイルローダー'}、{テスト：/.css$ /、ローダー： 'cssローダー'、クエリ：{モジュール：true、ローカルID名： '[名前][ローカル] _[ハッシュ：base64：5]'}}]}

1
Bertwin Romero

スタイルシート全体にバンドルせずに、スタイルシートからコンポーネントにスタイルを挿入するだけの場合は、 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モジュールの一括インポートが最善または最も実行可能な解決策ではない場合のためにそれを構築しました。

0
glortho