Question

我使用Laravel 5.4和Vue.js 2。在vue组件中，我想使用文档\ressources\assets\sass\_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替换为red，则会编译没有错误。

如何使用此变量？任何提示都会非常感激。

Answer 1

您没有在组件的样式部分导入app.scss文件，因此它没有引用其中定义的任何变量。

您可以将该文件导入Vue组件的样式部分，如下所示：

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

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

Vue.js：如何使用来自laravel predifined _variables.scss文件的变量？

1 个答案: