css に対する vite のデフォルトサポート

css-loaderwebpack では、 webpack が css ファイルを認識できるように、プロジェクトにインストールする必要があります。

vue-cliこれに組み込まれているwebpackに基づいていますloader

Vite は、本質的に CSS ファイルの直接処理をサポートしています。

例を見てみましょう：

プロジェクトのルートディレクトリに index.html、main.js、index.css を作成し、vite をインストールします。

index.html で main.js を導入します

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
  </head>
  <body>
    <script src="./main.js" type="module"></script>
    <div>Vite天生就是支持对CSS文件的直接处理的。</div>
  </body>
</html>

main.js に index.css を導入

import "./index.css"

次に、index.css にグローバル背景を追加します。

html,body {
  background: red;
  height: 100%;
  width: 100%;
}

vite を使用してプロジェクトを開始すると、プラグインをインストールしなくても .css ファイルを認識できることがわかります。

css スタイルを vite に追加する原則

vite が main.js で参照されているものを読み取るときindex.css、ノードの fs モジュールを使用してコンテンツを取得します。

Content-Typeまず、元のコンテンツを js スクリプトに置き換え (ホットアップデートまたは css モジュール化を容易にするため) 、同時に js に設定して、ブラウザーが JS スクリプトの形式で css サフィックスを持つファイルを実行できるようにします。

次に、styleタグを直接作成し、index.css ファイルの元のコンテンツを style タグに直接コピーします。最後に、スタイルタグを index.html に挿入しますhead。

Cssモジュール

スタイルファイルをインポートする上記の方法には問題があります。たとえば、2 つの .css ファイルが同じクラス名を定義している場合、スタイルは上書きされます。

ここでは、足場やフロントエンドフレームワークを使用せずにプロジェクトを開発することについて話していることに注意してください。vue を使用してプロジェクトを開発する場合、そのタグのスコープ属性もこの問題を解決できます。

//  index.css
.wrap{
 background: yellow;
}
// test.css
.wrap{
 background: yellow;
}

// main.js
import "./moduleA.js";
import "./moduleB.js";

// moduleA.js
import "./index.css";
const div = document.createElement("div")
document.body.appendChild(div)
div.className = "footer"
div.innerText ="别看我只是一只羊"

// moduleB.js
import "./test.css";
const div = document.createElement("div")
document.body.appendChild(div)
div.className = "footer"
div.innerText ="羊儿的聪明难以想象！"

index.html

<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="./main.js" type="module"></script>
  </body>
</html>

どうやら、test.css のスタイルは index.css のスタイルをオーバーライドします。

プロジェクトが複数の人によって開発されている場合、クラス名が重複することは非常に一般的ですが、上記の問題は明らかにプロジェクト開発に問題をもたらします。

したがって、vite は CssModule の助けを借りてこの問題を解決します。

CssModule とは: https://www.ruanyifeng.com/blog/2016/06/css_modules.html

CSS ルールはグローバルであり、どのコンポーネントのスタイルルールもページ全体で有効です。

ローカルスコープを生成する唯一の方法は、他のセレクターと同じ名前を持たない一意のクラス名を使用することです。これが CSS モジュールの機能です。

使用

CssModule を使用してこの問題を解決するには、xxx.module.css のようにファイルに名前を付けるだけです。

index.css をindex.module.cssに、test.css をtest.module.cssに変更します。

次に、moduleA.js と moduleB.js を微調整します

// moduleA.js
import index from "./index.module.css";
const div = document.createElement("div")
document.body.appendChild(div)
div.className = index.wrap
div.innerText ="别看我只是一只羊"

// moduleB.js
import test from "./test.module.css";
const div = document.createElement("div");
document.body.appendChild(div);
div.className = test.wrap;
div.innerText = "羊儿的聪明难以想象";

注: インポートされたスタイルファイルについては、console.log(index) を出力できます。

css を js に置き換えた後、エクスポートされたオブジェクトには、元のクラス名と変更されたクラス名のオブジェクトが含まれていることがわかります。

したがって、div.className = test.wrap によって変更されたクラス名を取得できます。

変更後、スタイルの問題が解決されたことがわかります。

vite configure CSS

モジュールオプション

vite.config.js の css.modules 設定項目を使用して、機能の有効化または無効化、ハッシュ名の変更など、CssModule の一部のデフォルトコンテンツを変更できます。

import { defineConfig } from "vite";
export default defineConfig( {
  // 对css的行为进行配置
  css:{
    // 是对css模块化的默认行为进行覆盖
    modules:{
      
    }
  }
});

モジュールの構成は、実際にはpostcssに渡されて処理されます。具体的な構成については、postcss-modulesを参照してください。

モジュールオプションの完全な設定

modules: {
  // 是否开启模块化
  scopeBehaviour: 'global' | 'local'
  // 代表你不想参与到css模块化的路径
  globalModulePaths: RegExp[]
  // 更改生成的哈希名称，一个字符串模板或者通过函数返回
  generateScopedName:
    | string
    | ((name: string, filename: string, css: string) => string)
  // 生成hash名称的前缀
  hashPrefix: string
  // 修改生成的配置对象的key的展示形式(驼峰还是中划线形式)
  localsConvention:
    | 'camelCase'
    | 'camelCaseOnly'
    | 'dashes'
    | 'dashesOnly'
    | null
}

スコープ動作

構成の提案: 頭が悪い場合は、変更できます

モジュール化機能を有効にするかどうか。

オプションの引数: 'global' | 'local'
デフォルト: 「ローカル」

デフォルト値をグローバルに変更します

import { defineConfig } from "vite";
export default defineConfig({
  css: {
    // 是对css模块化的默认行为进行覆盖
    modules: {
      scopeBehaviour: "global" 
    }
  }
});

モジュラー機能がオフになっていることがわかります。

地元のコンベンション

キーと値のペアの形式を返します

デフォルト: camelCaseOnly

オプションのパラメータ

キャメルケース
キャメルケースのみ
ダッシュ
ダッシュのみ
ヌル

試しにキャメルケースとして設定してみましょう

import { defineConfig } from "vite";
export default defineConfig({
  css: {
    // 是对css模块化的默认行为进行覆盖
    modules: {
      localsConvention: "camelCase", 
      scopeBehaviour: "local" 
    }
  }
});

// index.module.css
.table-wrap{
 background: yellow;
}
// moduleA.js
import index from "./index.module.css";
console.log('index: ', index);

スタイルを参照する場合は、ele.className = index[キャメルケースの名前付け] を使用し、ele.className = index[ダッシュの名前付け] を使用できることがわかります。

キャメルケースのみ

ヌル

ダッシュ

ダッシュのみ

css を vite でよりエレガントに使用する方法

css に対する vite のデフォルトサポート

css スタイルを vite に追加する原則

Cssモジュール

vite configure CSS

モジュールオプション

スコープ動作

地元のコンベンション

おすすめ

css を vite でよりエレガントに使用する方法

css に対する vite のデフォルト サポート

css スタイルを vite に追加する原則

Cssモジュール

vite configure CSS

モジュールオプション

スコープ動作

地元のコンベンション

おすすめ

css に対する vite のデフォルトサポート