Salesforce VisualforcePageで外部CSS, JSファイルを読み込む方法

Salesforce VisualforceでカスタムなCSSファイル, JSファイルを読み込む方法

目次

1. 前提条件
2. Step1

前提条件

・開発手法：VScode

Step1（完結）

VScodeで「Visualforce Page」を新規作成
適当にCSS, JSファイルを作成してSalesforceの設定にある「静的リソース」から各ファイルをアップロードしておく
静的ファイル(CSS, JS)の名称を読み込むことでSFに反映できる

visualforce

<apex:page showHeader="false">
    <!-- import css file -->
    <apex:stylesheet value="{!$Resource.CustomCSS}" />
    <!-- import JavaScript file -->
    <apex:includeScript value="{!$Resource.CustomJS}"/>

    <h1>Hello World!!</h1>

    <button onclick="sample()">Click here!</button>

</apex:page>
                                        

CustomCSS

h1 {
    color: red;
    }

CustomJS

function sample() {
    alert('Hello!!');
}

SF組織にデプロイして、CSS, JSが反映されていればOK！
公式も外部ファイルを用意して、コールさせるのがベストプラクティスっぽい
だいたいが「同じファイル内にCSS書いていくパターン」or「SFのDesign System」で対応するやり方しか載ってなかったので、参考になれば幸いです🙌
※サンプル用に適当にソース書いているので、コピペじゃ動かない可能性ありなのはご了承ください〜
※CSS, JS読み込む部分は公式から引用してるので問題ないよ！