Приложение Nuxt Bulma не может получить доступ к переменным SCSS - PullRequest
Новая
       31

Приложение Nuxt Bulma не может получить доступ к переменным SCSS

0 голосов
/ 23 февраля 2019

Я создал приложение Nuxt с включенной Bulma и хотел бы получить доступ к / переопределить переменные Bulma в моих .vue файлах.Я следовал инструкциям здесь , которые, кажется, соответствуют тому, что я нашел в нескольких других местах, но я все еще получаю сообщение об ошибке при попытке доступа к переменной $primary в моем файле .vue.

Вот мой assets/css/main.scss файл: 

@import "~bulma/sass/utilities/_all.sass";
@import "~bulma/bulma";

Мой nuxt.config.js раздел модулей: 

modules: [
    ['nuxt-sass-resources-loader', './assets/css/main.scss']
],

И мой .vue файл: 


<template>
    <section class="container">
        <div class="my-title">
            About
        </div>
    </section>
</template>

<script>
export default {
};
</script>

<style lang="scss">
.my-title {
    color: $primary;
}
</style>

Вот сообщение об ошибке в терминале: 

Module build failed (from ./node_modules/sass-loader/lib/loader.js):                                                                                                                                                                                                                       friendly-errors 11:51:52

    color: $primary;
          ^
      Undefined variable: "$primary".
      in /Data/dev/GIT/Homepage/source/pages/about/index.vue (line 16, column 12)
                                                                                                                                                                                                                                                                                           friendly-errors 11:51:52
 @ ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./pages/about/index.vue?vue&type=style&index=0&lang=scss& 4:14-384 14:3-18:5 15:22-392
 @ ./pages/about/index.vue?vue&type=style&index=0&lang=scss&
 @ ./pages/about/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

Кто-нибудь может увидеть, что я делаю неправильно?

ОБНОВЛЕНИЕ: Я сузил его доустановка модулей nuxt.config.js путем импорта .scss непосредственно в файл .vue.Это работает, что говорит мне импорт в main.scss файл работает нормально.

1 Ответ

0 голосов
/ 24 февраля 2019

Хорошо, я не смог заставить его работать с загрузчиком nuxt-sass-resources-loader, но я все же получил его с помощью style-resources-module отсюда https://github.com/nuxt-community/style-resources-module. Как только я установил style-resources-moduleЯ просто добавил его в свой раздел модулей nuxt.config.js и добавил соответствующий раздел styleResources следующим образом: 

modules: [
    '@nuxtjs/style-resources'
],

styleResources: {
    scss: [
        './assets/css/main.scss'
    ]
},
...