あまり使用が少ないテーマ切り替えグローバルインポートノート

スイッチング達成するテーマ色

@themeに従ってテーマレイアウトを読み取ると、コンポーネント/ theme.lessを

@theme：暗いです。

.darkテーマ（@transparency）（@theme =デフォルト）{ 
  色：RGBA（0、0、0、@transparency）。
} 

.darkテーマ（@transparency）（@theme =暗い）{ 
  色：RGBA（255、255、255、@transparency）。
} 

.darkテーマ色（@transparency）（@theme =デフォルト）{ 
  色：RGBA（0、0、0、@transparency）。
} 

.darkテーマ色（@transparency）（@theme =暗い）{ 
  色：RGBA（255、255、255、@transparency）。
}

参考theme.less

<スタイルLANG = "少ない"スコープ> 
  @import '~@comp/theme.less'; 
  .TITLE { 
    .darkテーマ色（0.85）。
    フォントサイズ：16pxに; 
    フォント重量：500; 
    マージン下：16pxに; 
  } 
</スタイル>

あなたは、構成vue.config.jsを行う必要があります

chainWebpackます。（config）=> { 
    config.resolve.alias 
      .SET（ '@の$'、（ 'SRC'）解決）
      .SET（ '@のAPI'、解決（ 'SRC / APIを'））
      .SET（ '@資産、解決（ 'SRC /資産'））
      .SET（ '@カンプ'、解決（ 'SRC /コンポーネント'））
      .SET（ '@ビュー'、解決（ 'SRC /ビュー'））
      .SET（」 @layout」、決意（ 'SRC /レイアウト'））
      .SET（ '静的@ 'のsrc /静的'、（解決'））

これは、テーマを達成することができます

------------------------------分割ライン------------------ --------------------

一度導入されるtheme.lessに、非常に便利に有用であるという問題があります

グローバル加算theme.lessを実現するために次

最初の3または糸とNPM

CLI -プラグイン- VUEスタイルローダー|リソースの
スタイルリソース-ローダー
サス・リソース・ローダー（2つのフロントバーレーン効果的ではない、それをインストールしようとすることができます）

そして、新しい設定pluginOptionsをvue.config.js

pluginOptions：{ 
    'スタイルリソースローダ'：{ 
      プリプロセッサ： '以下'、
      パターン：[path.resolve（__ DIRNAME、 'SRC /資産/ CSS / theme.less'）] 
    } 
}

最後に移動しtheme.less それにはsrc /資産/ CSS /再実行のクリックを

あまり使用が少ないテーマ切り替えグローバルインポートノート

おすすめ