uni-app で scss を使用するサンプル コード

uni-app で scss を使用するサンプル コード

遭遇した落とし穴

私は午後中ずっと、uni-app で scss を使用する際の落とし穴を解決することに費やしました。まず、私の問題についてお話しします。scss を使用するときに @mixin を使用できなかったので、Baidu はさまざまな方法を使用してデバッグしました。

コード記述問題(公式サイトの記述方法を完全に踏襲することは不可能): 公式サイトデモ

ブラウザの問題(Firefox が動作しない)。

構文バージョンの問題(書き方を変えてもダメ): SCSSはmixinでは動作せず、ブラウザでコンパイルできない

プラグインがインストールされていません (再インストールしても機能しません)。

<style type='css'> を scss に変更しましたが、まだ動作しません。

新しいscss構文はまだ使用できません

午後中ずっと理解できませんでした。他に選択肢がなかったので、Vue に scss をインストールする方法を試してみようと思いつき、実際にうまくいきました。

なお、グローバルに導入することはできず、ページごとにしか導入できません。私も酔っています。

要約:

uni-app は vue をベースに作られています。次回何かをインストール/インポートしたい場合は、まず vue で試してください。うまくいかない場合は、uni-app を試してください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  包括的なウェブサイト評価ソリューション

>>:  Vue3でelement-plusを使用する方法の詳細な説明

推薦する

VirtualBox+Ubuntu16でKubernetesクラスタを構築する実装

目次Kubernetesについて基本的な環境の準備VirtualBoxをインストールするUbuntu...

1 つの記事で Vuex を理解する

目次概要Vuex の 4 つの主要オブジェクト状態の使用突然変異の使用ゲッターの使用アクションの使用...

Filebeat を使用して Nginx ログを収集する方法

Nginx ログは、ユーザーの住所の場所や行動プロファイルなどを分析するために使用できます。Elas...

DockerにTensorFlow環境を素早くインストールする方法

Docker に TensorFlow 環境をすばやくインストールし、TensorFlow を使用し...

5分でDockerを使ってRedisのクラスターモードとセンチネルモードを構築する方法を教えます

目次1. 準備Redisイメージを取得する2. Redis Sentinel マスタースレーブモード...

ドロップダウンメニューを表示または非表示にするJavaScript

この記事では、ドロップダウンメニューを表示および非表示にするJavaScriptの具体的なコードを参...

CentOS 8 に MariaDB をインストールするための詳細なチュートリアル

MariaDB データベース管理システムは MySQL のブランチであり、主にオープンソース コミュ...

iframeフレームはIEブラウザで白い背景を透明に設定します

最近、プロジェクトを進める過程で、ページの階層構造を描画するために iframe を頻繁に使用する必...

MySQLのスイッチングデータ保存ディレクトリの実装方法

MySQLのスイッチングデータ保存ディレクトリの実装方法今日、仕事中に、mysql が保存されている...

ウェブサイトのビジュアルデザイン(画像とテキスト)における情報伝達の役割と方法

現代の Web ビジュアル デザインは、初期の情報の積み重ねから、その後のグラフィックスと抽象化、そ...

Dockerカスタムブリッジdocker0とdockerのコマンド操作の開始、終了、再起動

質問会社がサーバーを移行した後、デフォルトで作成された docker0 ブリッジが会社の外部ネットワ...

HTML検証 HTML検証

HTML 検証はHTML 検証を指します。これは、HTML ドキュメントを分析し、標準の HTML ...

MySQLデータベースとOracleデータベース間のバックアップをインポートする

OracleデータベースからエクスポートされたデータをMySqlデータベースにインポートします。 1...

VMware は Centos7 システムの PXE+kickstart 無人インストールの詳細なプロセスを実装します

目次PXEはサーバーの無人バッチ展開を実装します1. PXEの概要1.1 PXEとは何か1.2 キッ...

Vue-CLI3.xはプロジェクトをサーバーに自動的にデプロイします

目次序文1. scp2をインストールする2. テスト/本番環境サーバーのSSHリモートログインアカウ...