[21/09/27]Junzzi Editorプロジェクトの設定-(4)scssの適用

7686 ワード
今日の開発 テキストリンク
ざっと書いてみた.

なぜscssを使うのですか?


  • 学習の目的(これまでプロジェクトはcss-in-js環境で行われていた.css-in-cssの適用を試みることにした)

  • ステータスに応じてUIスタイルを直接適用します(ユーザーのインタラクションが多いアプリケーションではcss-in-js方式よりも効率的です->UIスタイルを迅速に変更します).

  • エディタを親プロジェクトに移植する環境を考慮します(ベンダー情報入力プロジェクトはcss-in-css環境で作成されるため、scssの適用を考慮してください).

    • scssの適用


    CRA環境ではないので、プロジェクトではなくconfigを直接修正すればいいです.

    install

    
npm install node-sass style-loader css-loader sass-loader
    sass-loader
    Loads a Sass/SCSS file and compiles it to CSS.
    style-loader
    Creates style nodes from JS strings
    css-loader
    Translates CSS into CommonJS

    webpack setting


    Webパッケージは次のように設定されています.module.rulesに追加
    以下に示すように、ロード・プログラムの適用順序があるため、sass-loader->css-loader->style-loaderの順にアプリケーションを記述します.
     {
 
 	test: /\.scss$/,
    use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }],
 
 },
    sass-loaderを使用してscss、sassファイルをcssに変換し、css loaderを使用してCommon JSに変換します.スタイルラベルとして挿入します.

    use scss


    例としてButtonコンポーネントを作成
    // Button.tsx
import React from 'react';
import './style/Button.scss';
function Button() {
  return <button className="Button">this is button</button>;
}

export default Button;

    $blue: #228be6; // 주석 선언

.Button {
  display: inline-flex;
  color: white;
  font-weight: bold;
  outline: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;

  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;

  background: $blue; // 주석 사용
  &:hover {
    background: lighten($blue, 10%); // 색상 10% 밝게
  }

  &:active {
    background: darken($blue, 10%); // 색상 10% 어둡게
  }
}

    // EditorPage
import Button from '@/components/Button';
import React from 'react';

function EditorPage() {
  return (
    <div>
      <Button></Button>
    </div>
  );
}

export default EditorPage;

    result


    適用状況を確認できます.

    Ref


  • webpack docs

  • [velopert scss]

  • [non cra setting]
    • Chapter[非同期]
    class200ok | Day 3