Vue2.0でグローバルスタイルを設定する手順を詳しく解説

今回は、Vue2.0 でのグローバル スタイルの設定について詳しく説明します。注意点 とは何ですか?実際の事例を見てみましょう。

Vue のグローバル スタイルを設定するには、いくつかの手順が必要です (sass の場合は、sass に変更を加えるだけです)

ステップ 1: エントリー ファイルである src ディレクトリの main.js に次のコード

require('!style-loader!css-loader!less-loader!./common/less/index.less')

を追加します。 Vue バージョン 1.0 ではこのように記述できますが、バージョン 2.0 では機能しません。解析エラーを促すエラーが報告されます

require('./common/less/index.less')

。

ステップ 2: ビルド ディレクトリの webpack.base.conf.js 構成モジュールで、ルールの下に 2 つのモジュールを追加するだけです

module.exports = {
 module: {
 rules: [
  {
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
  },
  {
  test:/\.css$/,
  loader:'css-loader!style-loader',
  }
 ] 
 }  
}

ステップ 3: エラーが報告された場合、上記の依存関係をインストールすることはできません。ルート ディレクトリの package.json ファイルに依存関係を追加する必要があります

。

ステップ 4: コマンド ウィンドウでコマンドを実行して依存関係をインストールします

npm install

Linux (ubuntu、deepin)、Mac OS システムでは、権限が不十分であるため権限を取得する必要があるというメッセージが表示される場合があります。その場合は、フロントから権限を取得するだけで済みます

sudu npm install

後で使用量を減らす必要がある場合は、スタイル

<style></style>

に lang 属性を追加するだけです。 多数のパブリック ファイルがある場合は、それらをすべて 1 つのファイルにまとめ、パブリック ファイル リンクを通じて複数のスタイル ファイルにグローバル スタイルを実装できます。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、お支払いください。 PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

element-ui テーブルコンポーネントを再利用する方法

jsのスコープ使用法の詳細な説明

JS+canvasで回転アニメーションを作成

以上がVue2.0でグローバルスタイルを設定する手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。