1

CSSスタイルで使用する色やその他の設定を保存するためだけにファイルが必要です。異なるファイルで同じ色を何度も指定したくないからです。cssモジュールでそれを達成するにはどうすればよいですか?

例: 設定.css

$primary-color: #785372;
$secondary-corlor: #22b390;

ボタン/styles.css

.button {
  background: $primary-color;
  display: flex;
}
4

2 に答える 2

0

Sassのように見えるサンプルから（CSSモジュールと組み合わせて使用​​ できます）。その場合は、変数を含むパーシャルをインポートするだけです。

@import 'path/to/variables.scss';

Sass が関与していない場合は、postcss-modules-valuesが探しているものです。

variables.css

@value primary: #785372;
@value secondary: #22b390;

styles.css

@value primary, secondary from './path/to/variables.css';

.button {
  background: primary;
  display: flex;
}

編集:
実際には、PostCSS プラグインを介して、さらに多くのオプションがあります。postcss-simple-varsまたはpostcss-custom-properties、後者には、CSS 仕様に近いままでいるという明確な利点があります。ただし、それらはすべて同じ要件を共有し、何らかの方法で構成ファイルをインポートします。

于 2016-10-20T18:18:23.313 に答える
0

CSSカスタムプロパティを使用してこれを行うことができます（これは私が見つけたチュートリアルです）。

あなたのsettings.cssファイルで、 (`:root':

:root {
    --primary-color: #785372;
    --secondary-corlor: #22b390;
}

次に、これらの定数を同じファイルまたは別のファイルで使用できます

.container {
    color: var(--primary-color);
}

それらを別のファイルで使用している場合は、必ず両方のスタイルシートをインポートしてください。次に例を示します。

import './Button/styles.css'
import './settings.css'

また、この回答によれば、2 つのスタイルシートをリンクすることで、html でもこれを行うことができます。

<link href="settings.css" rel="stylesheet">
<link href="Button/style.css" rel="stylesheet">
于 2021-11-09T21:04:46.047 に答える