Question

我必须尝试一切非常简单的解决方案。

App.vue 文件

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

</style>

_variables.scss 文件

height: 27px;

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

在此屏幕截图中看到

错误： screenshot of error 原始错误：

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)

Answer 1

尝试这种方式，它将解决您的问题。

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

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

1 个答案: