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

php中世界最好的语言
リリース: 2018-04-14 15:24:17
オリジナル
2534 人が閲覧しました

今回は、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 ファイルに依存関係を追加する必要があります

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

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

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

sudu npm install
ログイン後にコピー
後で使用量を減らす必要がある場合は、スタイル

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

推奨読書:

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


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


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

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート