8. SCSSは、コンポーネントを作成し、ローカルスコープのスコープ

1. SCSS

SCSSはCSSの提携がより直感的に見えるようにすることです

プロジェクトディレクトリには、インストールコマンドを実行します。

cnpmインストールノード-SASS --save- DEV 
cnpmインストールSASS -loader --save-devの

次に、プロジェクトディレクトリに参加する構成コードでルールをwebpack.config.js：

{ 
        試験： /\.scss$/ 、
        ローダー：[ 'スタイル'、 'CSS'、 'サス' ] 
}、

 

 

 エラーが発生した場合：

モジュールのビルドに失敗しました：TypeError例外を：この .getResolveはない機能

 

 エラーSASS-ローダーのバージョンをコンパイルし、現在最高のバージョン8.xに、私たちは7.3.1を実行しているに戻る必要があるため高すぎます

CNPM sass-アンインストールローダー（現在のバージョンをアンインストール）

CNPMをインストールサス [email protected] --save- devの

CNPMインストール

2.新しいコンポーネント

srcディレクトリに新しいディレクトリコンポーネント、Home.vueという名前のコンポーネントディレクトリに新しいアセンブリ：

< テンプレート> 
    < divの> 
        < H2 >このコンポーネントはホームである</ H2 > 
        < ボタン@click = "RUN" >ポップアップアセンブリ促しホーム</ ボタン> 
    </ DIV > 
</ テンプレート> 
< スクリプト> 
エクスポートデフォルト{ 
  名：' ホーム' 、   
  データ（）{ 
    リターン{ 
        MSG：' ホームアセンブリ' 
    } 
  }、
  方法：{ 
    ラン（）{
        アラート（この.MSG）
    } 
  } 

} 
</ スクリプト> 
< スタイルのlang = "SCSS" スコープ> 
H2 { 
    色：赤。
} 
</ スタイル>

App.vueのルート要素3.取付アセンブリ参照

< テンプレート> 
  < DIV ID = "アプリケーション" > 
    < H2 > {{MSG}} </ H2 > 
    < V-ホーム> </ V-ホーム> 
  </ DIV > 
</ テンプレート> 
< スクリプト> 
// 1.導入しますアセンブリ
// 2.アセンブリマウント
// 3.テンプレートの中で引用された
ホームからのインポート「./components/Home.vue 」; 
輸出デフォルト{ 
  名：「アプリケーション」、
  データ（）{ 
    リターン{ 
      MSG：' 根组件' 
    } 
  }、
  メソッド：{ 
  }、
  コンポーネント：{ 
    ' V-家' ：ホーム
  } 

} 
</ スクリプト> 
< スタイル> 

</ スタイル>

 

 部品アセンブリをマウントルートに加えて、コンポーネント間で相互に取り付けることができます。