vue-cli2.0がグローバルCSSスタイルの導入を実装

vue-cli2.0の段階的な実装により、グローバルCSSスタイルが導入されます。

lessおよびsass-resources-loaderの紹介

npm install less less-loader --save

npm install sass-resources-loader --save-dev

ビルド> utils.jsに移動します

（関数が宣言されている）関数generateLoadersを見つけ、この関数の背後にある次のコードをコピーします。

function lessResourceLoader() {
    
    
      var loaders = [
          cssLoader,
          'less-loader',
          {
    
    
              loader: 'sass-resources-loader',
              options: {
    
    
                  resources: [
                      path.resolve(__dirname, '../src/assets/style/public.less'),
                  ]
              }
                      }
      ];
      if (options.extract) {
    
    
          return ExtractTextPlugin.extract({
    
    
              use: loaders,
              fallback: 'vue-style-loader'
          })
      } else {
    
    
          return ['vue-style-loader'].concat(loaders)
      }
}

コピーされたコードは次のようになります

）

パラメータを変更する

次に、それをlessに呼び出すときに、generateLoaders関数のパラメーターをlessに変更します：lessResourceLoader（ 'less'）。詳細については、下の図を参照してください

グローバル変数を宣言する

次に、less変数をpublic.lessで宣言します。詳細については、下の図を参照してください

グローバル変数を呼び出す

これで、任意の.vueファイルで上記で宣言した変数を呼び出すことができます。詳細については、下の図を参照してください

はい、すべて完了しました。

ご不明な点がございましたら、ご返信ください。タイプミスでも。ワン-
エルハ