0

我正在玩 nuxt.js 并尝试构建一个简单的网站以查看所有内容如何组合在一起。我有一些 scss 文件都包含在组件中，但我的 mixin 不起作用。

更新我已将样式资源添加到我的 nuxt 配置中，但现在出现错误 No mixin named mobilefirst in /pages/index.vue

我的模板代码在下面，我已经导入了我的 mixins 文件并尝试使用我的@include mobilefirstmixin，但是当页面被渲染时只输出规则的第一个位并且忽略我的 mixin 的任何内容。

<template>
  <div>

    <navigation />

    <hero />

    <qualifications />

     <section class="about">
        <div class="container container--900">

            <h2 class="about__title">
                JJ And Sons Plastering 
            </h2>

            <p class="about__text">
            JJ and Sons are a family run business that have been leading providers in all aspects of plastering for over 18 years. 
            We are based in Yorkshire and carry out work throughout the whole of the UK with a reputation for delivering a high end flawless finish.
            </p>

        </div>
    </section>

  </div>
</template>

<script>
import Navigation from '~/components/Navigation.vue'
import Hero from '~/components/Hero.vue'
import Qualifications from '~/components/Qualifications.vue'

export default {
  components: {
    Navigation,
    Hero,
    Qualifications
  }
}
</script>

<style lang="scss"> 
@import '../assets/scss/helpers/variables.scss';
@import '../assets/scss/helpers/mixins.scss';

.about {
    padding: 50px 0;
    text-align: center;

    @include mobilefirst(em(991)) {
        padding: 75px 0;
    }

    @include mobilefirst(em(1024)) {
        padding: 100px 0;
    }

    @include mobilefirst(em(1400)) {
        padding: 100px 0;
    }
}

.about__title {
    @include font-sizes(25, 25, 40, 55, 55);
    @include lineheight(30, 30, 50, 65, 65);
    margin-bottom: 50px;
}

.about__text {
    font-size: 22px;
    line-height: 30px;
    font-weight: light;
}
</style>

我的 nuxt.config.js

    module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'jjandsonsplastering',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'JJ & Sons Plastering website' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Playfair+Display:400,700|Roboto:400,500,700'
      }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    styleResources: {
      options: {
        // See https://github.com/yenshih/style-resources-loader#options
        globOptions: path.resolve(__dirname, './assets/scss/*/*.scss')
      }
    },
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}
4

0 回答 0