时间戳

首页 > 解决方案 > VueJS 2 - 无法在 App.vue 文件中使用导入文件中的变量

javascript - VueJS 2 - 无法在 App.vue 文件中使用导入文件中的变量

问题描述

必须有一个非常简单的解决方案，我已经尝试了所有方法。

应用程序.vue文件

<style lang="scss" scoped>
 @import 'src/assets/styles/_variables.scss'
 img {
    height: $height;
 }

</style>

_variables.scss文件

height: 27px;

即使我移动img { height: $height; }我仍然会得到一个错误。对于我的生活，我只想$height从导入的 scss 文件中访问。这一定很简单吧？

此屏幕截图中看到 的错误：错误 原始错误的屏幕截图：

ERROR in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"data-v-06ade8f3","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: 
  img {
  ^
      Invalid CSS after "img": expected 1 selector or at-rule, was "{"
      in /Applications/MAMP/htdocs/vuejs-portfolio/src/App.vue (line 63, column 4)

标签： javascriptvue.jssassvuejs2

解决方案

试试这个方法，它会解决你的问题。

<style lang="scss" scoped>
 @import 'src/assets/styles/_variables.scss';
 img {
    height: $height;
 }
</style>

推荐阅读