Vue.js単一ファイルコンポーネントでSCSSを使用する方法

Vue.jsコンポーネントでSCSSを有効にする方法をご覧ください

を使用してVue CLI「CSSプリプロセッサ」を有効にして、有効にするものを選択できます。

Vue CLI

Vue CLIに基づかないプロジェクト、またはVue CLIを使用して初期化されたが、CSSプリプロセッササポートを追加しなかったプロジェクトを使用している場合は、後で使用して追加できます。

npm install --save-dev node-sass sass-loader

アプリケーションコンポーネント内で使用できます

<style lang="scss">
...
</style>

そこにSCSSコードを追加します。

SCSSコードを外部ファイルに保持したい場合は、それを実行して、コンポーネントのスクリプト部分にインポートするだけです。

<script>
import '../public/style.scss'

//… </script>

私の無料ダウンロードVueハンドブック


その他のvueチュートリアル: