Использование CSS Framework в каждом компоненте Vue с собственными переменными

Question

Я довольно новичок в мире VueJS и Webpack, поэтому мне нужна помощь.

Я установил VueJS и Webpack через консоль с помощью команды

vue init webpack my-project 

и после этого я установил bulma CSS Framework в этом каталоге. с

npm install bulma 

Я переопределить некоторые bulma переменные в variables.scss. Если я импортирую оба файла в разделе стиля моего App.vue все работает нормально.

Мои App.vue выглядит следующим образом:

<template> 
    <div id="app"> 
    <top-navigation/> 
    <div class="has-text-centered"> 
     <img src="./assets/logo.png"> 
     <p>Test</p> 
     <router-view></router-view> 
    </div> 

    </div> 
</template> 

<script> 
    import TopNavigation from './components/shared/TopNavigation.vue' 

    export default { 
    name: 'app', 
    components: { 
     'top-navigation': TopNavigation 
    } 
    } 
</script> 

<style lang="scss"> 
    @import 'assets/scss/_variables.scss'; 
    @import '~bulma'; 

</style> 

Мои TopNavigation.vue выглядит следующим образом:

<template> 
    <div> 
    <div class="blue-bg"> 
     <div class="container"> 
     <h2 class="title">Test</h2> 
     </div> 
    </div> 
    </div> 
</template> 

<script> 

    export default { 
    data() { 
     return { 
     msg: 'hello vue' 
     } 
    } 
    } 
</script> 

<style lang="scss"> 
    .blue-bg { 
    height: 80px; 
    background-color: $blue; 
    } 
</style> 

Но я получаю сообщение об ошибке:

error in ./src/components/shared/TopNavigation.vue

Module build failed: background-color: $blue;
Undefined variable: "$blue".

---

Я искал какое-то время и пытался импортировать файлы непосредственно в моем webpackutils.js файла, как это:

scss: generateLoaders(['css', 'sass?data=@import "./src/assets/scss/_variables.scss";@import "~bulma";']), 

Теперь я не получаю сообщение об ошибке, и в моем TopNavigation использует правый синий цвет. Но теперь bulma-variable не переопределяют.

Надеюсь, вы, ребята, понимаете мою проблему, и кто-то может мне помочь.

Answer 1

Я не думаю, что вы можете использовать scss, так как bulma использует sass. Просто измените TopNavigation.vue стиль:

<style lang="sass" scoped> 
    @import '~bulma/sass/utilities/variables.sass' 
    .blue-bg 
    height: 80px; 
    background-color: $blue; 
</style> 

И я думаю, что это следует сделать трюк.

Answer 2

Если вы новичок, как и я, лучше не перегружать Webpack и прочее.

То, что я сделал сейчас [было бы плохой практикой], - загрузить bulma.css с веб-сайта bulma.

Использование vue-cli, пусть это создаст мне структуру проекта шаблона [еще раз я проигнорировал магию веб-папок на данный момент, используемый шаблон был webpack-simple].

Добавлен загруженный файл CSS к расположению в статической папке структуры проекта и ссылки его в моем App.vue

<style src="../static/bulma.css"> 

Фокус учиться и развиваться, а затем попасть в обучение более продвинутые вещи как инструмент для сборки инструментов webpack и т. д.