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

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

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

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

//コード

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

モジュール.エクスポート = {
  チェーン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,
        },
      })
    });

  },
};