Question

我正在玩nuxt.js，并试图构建一个简单的网站以查看一切如何结合在一起。我的组件中包含了一些scss文件，但我的mixin无法正常工作。

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

中没有名为mobilefirst的混入

下面是我的模板代码，我导入了mixins文件并尝试使用@include mobilefirst mixin，但是在呈现页面时，仅输出规则的第一位，而忽略我的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)/
        })
      }
    }
  }
}

响应式混合不适用于nuxt.js

0 个答案: