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文件？

回答

相关问题