Webpack 在每个具有自己变量的Vue组件中使用CSS框架

我对

VueJS

和

Webpack

的世界相当陌生，所以我需要一些帮助

我已使用命令通过控制台安装了

VueJS

和

Webpack

vue init webpack my-project

在这之后，我在这个目录中安装了。与

npm install bulma

我已经覆盖了

变量.scss中的一些
bulma
变量。如果我在我的App.vue的style部分导入了这两个文件，一切正常

我的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
中使用了正确的蓝色。但是现在，
bulma变量
没有得到覆盖

我希望你们理解我的问题，有人能帮我解决这个问题。
我认为你们不能使用SCS，因为bulma使用sass。只需将您的TopNavigation.vue样式更改为：

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


@导入“~bulma/sass/utilities/variables.sass”
.蓝色背景
高度：80px；
背景颜色：$蓝色；

我认为这应该可以解决问题。
我认为您不能使用SCS，因为bulma使用sass。只需将您的TopNavigation.vue样式更改为：

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


@导入“~bulma/sass/utilities/variables.sass”
.蓝色背景
高度：80px；
背景颜色：$蓝色；

我认为这应该可以解决问题。
如果你和我一样是新手，最好不要被网页和其他东西弄得不知所措

我现在所做的[不好的做法]是从bulma网站下载bulma.css

使用vue cli，让它为我创建一个模板项目结构[现在我再次忽略了webpack魔法，使用的模板是webpack simple]

将下载的css文件添加到项目结构的静态文件夹中的位置，并在my App.vue中引用它

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



重点是学习和开发，然后学习更高级的东西，如构建工具网页等。
如果你和我一样是新手，最好不要被网页和其他东西弄得不知所措

我现在所做的[不好的做法]是从bulma网站下载bulma.css

使用vue cli，让它为我创建一个模板项目结构[现在我再次忽略了webpack魔法，使用的模板是webpack simple]

将下载的css文件添加到项目结构的静态文件夹中的位置，并在my App.vue中引用它

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



重点是学习和开发，然后学习更高级的东西，如构建工具网页等