ホームページ > 記事 > ウェブフロントエンド > Vue で CSS モジュールを使用する方法

Vue で CSS モジュールを使用する方法

不言オリジナル: 2018-06-29 16:42:341470ブラウズ

この記事では、主に Vue で CSS モジュールを使用するエレガントな方法を紹介します。この記事のテキストは、サンプルコードと組み合わせて詳しく紹介しています。必要な方は参照してください。

CSS モジュール: ローカルスコープ。 & モジュール化

CSS モジュールコンポーネントのスタイルが相互に影響を与えないように、各ローカルクラスにグローバルに一意のクラス名を付けます。例:

/* button.css */
.button {
 font-size: 16px;
}
.mini {
 font-size: 12px;
}

これは次のように変換されます:

/* button.css */
.button__button--d8fj3 {
 font-size: 16px;
}
.button__mini--f90jc {
 font-size: 12px;
}

CSS モジュールファイルをインポートすると、ローカルクラス名からグローバルクラス名へのマッピングオブジェクトが提供されます。次のように:

import styles from './button.css'
// styles = {
// button: 'button__button--d8fj3',
// mini: 'button__mini--f90jc'
// }
element.innerHTML = '<button class="&#39; + styles.button + &#39; &#39; + styles.mini + &#39;" />'

vue-css-modules: 簡略化されたクラス名のマッピング

ここに CSS モジュールを使用したボタンコンポーネントがあります:

<template>
 <button :class="{
 &#39;global-button-class-name&#39;: true,
 [styles.button]: true,
 [styles.mini]: mini
 }">点我</button>
</template>
<script>
 import styles from './button.css'
 export default {
 props: { mini: Boolean },
 data: () => ({ styles })
 }
</script>

確かに、CSS モジュールは Vue コンポーネントに適しています。ただし、次の欠点もあります:

データでスタイルを渡す必要があります
グローバルクラス名をインポートするには、styles.localClassName を使用する必要があります
他のグローバルクラス名がある場合は、それらを入力する必要がありますTogether
ローカルクラス名と属性名が同じでもコンポーネントの属性値にバインドしたい場合は明示的に指定する必要があります

上記のボタンコンポーネントの場合、vue-を使用した後、 css-modules:

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

現在:

データでスタイルを渡す必要はありませんが、ミックスインでスタイルを渡す必要があります:full_moon_with_face:
styles.localClassNameに別れを告げることができます
ローカルクラス名を styleName 属性に置き、グローバルクラス名を class 属性に置き、同じ name 属性を持つ多くの
ローカルクラス名バインディングコンポーネントを規制します。その前に modifier
を追加するだけです。

modifier

@button

<button styleName="@button">按钮</button>

これは次と同等です:

<button styleName="button" data-component-button="true">按钮</button>

これにより、コンポーネントのスタイルを外部からリセットできます:

.form [data-component-button] {
 font-size: 20px;
}

$type

<button styleName="$type">按钮</button>

これは次と同等です:

<button :styleName="type">按钮</button>

:mini

<button styleName=":mini">按钮</button>

これは次と同等です:

<button :styleName="mini ? &#39;mini&#39; : &#39;&#39;">按钮</button>
disabled=isDisabled
<button styleName="disabled=isDisabled">按钮</button>

これと同等:

<button :styleName="isDisabled ? &#39;disabled&#39; : &#39;&#39;">按钮</button>

使用法

Vueテンプレートで使用する

テンプレートの外にCSSモジュールを導入する

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 import styles from './button.css'
 export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean }
 }
</script>

テンプレート内でCSSモジュールを使用する

<template>
 <button
 class="global-button-class-name"
 styleName="button :mini">
 点我
 </button>
</template>
<script>
 import CSSModules from 'vue-css-modules'
 export default {
 mixins: [CSSModules()],
 props: { mini: Boolean }
 }
</script>
<style module>
 .button {
 font-size: 16px;
 }
 .mini {
 font-size: 12px;
 }
</style>

Vue JSXで使用する

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render() {
 return (
  <button styleName="@button :mini">点我</button>
 )
 }
}

Vueでレンダリングする

import CSSModules from 'vue-css-modules'
import styles from './button.css'
export default {
 mixins: [CSSModules(styles)],
 props: { mini: Boolean },
 render(h) {
 return h('button', {
  styleName: '@button :mini'
 }, '点我')
 }
}

を関数で使用する以上が、皆さんの学習に役立つことを願っています。中国語のサイトです！

Vue で CSS モジュールを使用する方法

関連記事