css-loader を使用して vue-cli で css モジュールを実装する

【序文】

Vue と React の CSS モジュールソリューションはどちらも、実装にローダーに依存しています。使用中、Vue はscoped属性を使用してスタイルをプライベート化し、ディープセレクター/deepを使用してスタイルを非プライベート化します。

例：

<div>
    <div class="demo">
        <div class="child"></
        div>
    </div>
</div>
<スクリプト>
//コード
<スクリプト/>
<style lang="less" スコープ>
  .デモ{
    高さ: 100px;
    パディング上部: 20px;
    背景色: グレー;
    /deep/.child {
      色: 赤;
    }
  }
</スタイル>

これは react での使用方法です (css-loader に基づく):

//テストなし
.デモ{
    高さ: 100px;
    パディング上部: 20px;
    背景色: グレー;
    :global(.child) {
        色: 赤
    }
}

'./test.less' からスタイルをインポートします

//コード

<div className={styles.demo}>
    <div class="child"></div>
</div>

vue の方が使いやすいと言わざるを得ません。

この CSS モジュールのソリューションを実装するために、Vue で css-loader を使用する必要がある場合はどうなりますか?ここでは、vue-clie 3.x を例に挙げます。

vue のスキャフォールディングvue-cliでも、 react のスキャフォールディングumiでも、 webpack-chain webpack の設定に使用されるようになりました。

ここで、 vue-cliスキャフォールディングによって作成されたプロジェクトのルートディレクトリに、新しいvue.config.jsを作成し、次の内容を記述します。

モジュール.エクスポート = {
  チェーンWebpack: (config) => {
    config.devServer
      。プロキシ（{
        '/api': {
          ターゲット: 'http://localhost:3000',
          パス書き換え: { '^/api': '', },
        },
      })
      .port(9000);

    構成モジュール
    .rule('less')
    .oneOf('通常のモジュール')
    .test(/.less$/)
    .use('css-loader')
    .tap(オプション => {
      Object.assign(options, { を返します
        モジュール:
          localIdentName: '[name]__[local]___[hash:base64:5]',
          自動: /\.less$/i,
        },
      })
    });

  },
};

実はこの段落を書く必要はありません。vue-cli の scaffolding はデフォルトでcss-loaderのモジュール化を設定していますが、 less ファイルはxxx.module.lessという形式で名前を付ける必要があり、 umi設定と異なり不便です。設定して再起動したら react のように css を書いて、インポートしたstyle dataに格納すれば良いのです。ここでは、vue-cli でcss-loaderを使用できるソリューションについてのみ説明しますが、ベストプラクティスは vue に付属しているものを使用することです。

これで、css-loader を使用して vue-cli で css モジュールを実装する方法についての説明は終了です。vue-cli で css モジュールを使用する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML ページはダークモードの実装をサポートします

>>: Nginx 構成 SSL および WSS 手順の紹介