Question

我尝试了很多，但我不知道如何使用nuxt.js在我的vue文件中提供我的sass vars，函数和mixins。

这是我的文件夹结构

--pages
    index.vue
--layouts
  header.vue
--styles
  --scss
    --helpers
      _breakpoints.scss
      _colors.scss
      _main.scss
    --vars
      _breakpoints.scss
      _colors.scss
      _main.scss
    main.scss

在styles/scss/内，一切正常。我可以导入任何scss文件没有问题，但是当我想从layouts文件夹中的vue文件访问时，我只得到错误：

要导入的文件未找到或不可读：~style / main.scss。

这是我的header.vue文件

<style lang="scss" scoped>
    @import "~styles/main.scss";

    .logo{
        width: 120px;
        height: auto;

        @include respond-at("medium"){
            width: 170px;
        };

        @include respond-at("large"){
          width: 220px;
        };
    }
</style>
<template>
    <header>
        <img src="/logo.png" alt="" class="logo">
    </header>
</template>
<script>
...

这是我的nuxt.config.js文件

var path = require('path');
module.exports = {
    ...
    css: [
        '~/styles/vendors/sanitize.css',
        '~/styles/scss/main.scss'
    ],

    resolve: {
        alias: {
            'styles': path.resolve(__dirname, '~/styles/scss/')
        }
    },
    ...

更新

好的，如果我只写

@import "styles/scss/main.scss";

比它有效，但我必须在每个.vue文件中重复这个，我需要mixins ......

但我认为没关系。然后我在开始时看到有对mixins的依赖

Answer 1

您是否尝试替换@import "~styles/main.scss";上的@import "~/styles/main.scss";？

将所有mixins和vars导入.vue文件

更新

1 个答案: