Я играю с nuxt.js и пытаюсь создать простой веб-сайт, чтобы увидеть, как все работает вместе. У меня есть несколько файлов scss, которые все включены в компонент, но мой миксин не работает.
ОБНОВЛЕНИЕ Я добавил ресурсы стиля в свою конфигурацию nuxt, но теперь получаю ошибку Нет миксина с именем mobilefirst в /pages/index.vue
Мой код шаблона ниже, я импортировал свой файл миксинов и попытался использовать свой миксин @include mobilefirst
, но при рендеринге страницы выводятся только первые биты правила и игнорируются все мои миксины.
<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)/
})
}
}
}
}
@Aldarund Я добавил это в свою конфигурацию, и файл был загружен правильно, но теперь я получаю `` Нет миксина с именем mobilefirst в /pages/index.vue (строка 50, столбец 14) ''
styleResources: {scss: './assets/scss/*/*.scss'},