Vue.js：如何使用變量從laravel preifined _variables.scss文件？

我使用Laravel 5.4 Vue.js 2. 在VUE組分，我想使用文檔\ressources\assets\sass\_variables.scss中指定的變量。Vue.js：如何使用變量從laravel preifined _variables.scss文件？

這是我的代碼：

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

這個變量文件的文件\ressources\assets\sass\app.scss

在編譯進口，NPM返回以下錯誤：

> 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它編譯沒有錯誤。

怎麼可能使用這個變量？任何提示將非常感激。

來源

2017-06-02 Warrio

您需要導入'app.scss'文件到您的組件的樣式部分。 – thanksd

@thanksd app.scss（app.css）的編譯版本已經導入到組件的使用位置。 – Warrio

組件的樣式部分的作用域沒有考慮到它父級的作用域。據我所知，您需要在組件的作用域中定義sass變量或從指定的文件中導入它們。 – thanksd

您還沒有導入app.scss文件在你的組件的樣式部分，因此它不具有任何在它定義的變量的引用。

您可以導入該文件到您的Vue組件的樣式部分，像這樣：

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

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

來源

2017-06-02 17:39:55 thanksd

它返回以下錯誤：'./resources/assets/js/components/person-show.vue中的錯誤模塊構建失敗： @import'.. /../../sass/app.scss'; ^ 要導入的文件找不到或無法讀取：../../../sass/app.scss。父樣式表：用C標準輸入：\ WWW \項目\ CRM \資源\資產\ JS \分量\人次show.vue（線147，第1列）' – Warrio

哎呀，剛剛是'」 .. /../ SASS/app.scss'' – thanksd

除非你使用的WebPack，然後它會是更好的別名'assets'文件夾，這樣你就不需要使用 – thanksd

Vue.js：如何使用變量從laravel preifined _variables.scss文件？

回答

相關問題