Vue.js：laravel predifined _variables.scssファイルから変数を使用する方法は？

Question

私はVue.js 2でLaravel 5.4を使用しています。 vueコンポーネントでは、文書\ressources\assets\sass\_variables.scssで指定された変数を使用したいと思います。

この

は私のコードです：

> Module build failed: 
>   color: $brand-info 
>   ^
>  Undefined variable: "$brand-info". 
>  in C:\www\projects\crm\resources\assets\js\components\person-show.vue 
> (line 150, column 12) 

は私がで$brand-infoを交換する場合：この変数ファイルはコンパイルの\ressources\assets\sass\app.scss

ファイルにインポートされ

<template> 
... 
<template> 
<style lang="sass"> 
    #note 
    color: $brand-info 
</style> 

、NPMは次のエラーを返します。 red、エラーなしでコンパイルされます。

この変数はどのように使用できますか？ ヒントは本当に感謝しています。

Answer 1

コンポーネントのスタイルセクションにapp.scssファイルをインポートしていないため、定義されている変数への参照はありません。

あなたはそうのようなあなたのVueのコンポーネントのスタイルセクションにそのファイルをインポートすることができます：あなたは、あなたのコンポーネントのスタイルセクションにあなたの `app.scss`ファイルをインポートする必要が

<style lang="sass"> 
    @import '../../sass/app'; 

    #note 
    color: $brand-info 
</style>