Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8576

TypeScript + React + WebpackでCSSを使う(短いです)

$
0
0
  1. css-loaderとstyle-loaderパッケージをインストール

    $ npm install style-loader css-loader --save-dev
  2. webpack.configにcssのためのルールを追加

    ...
    rules: [
      ...
      {test: /\.css$/, loader: ['style-loader', 'css-loader']}, # この行を追加。loaderの指定の順番を変えると動かない。
  3. cssファイルを用意して、srcの下あたりに置く。例えばstyles.cssを以下の内容で作る。

    #gigantic{font-size:1000px;}.crazy-small{font-size:7px;}
  4. cssを使いたいコンポーネント(例えば、app.tsx)から、cssファイルをインポートする。モジュールと同じように相対パスは指定する。

    import"../../css/styles.css"
  5. idやclassでスタイルを適用する。

    <divid="gigantic">Tokyo</div><divclassName="crazy-small">Olympic</div>

Viewing all articles
Browse latest Browse all 8576

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>