2

我对这个世界还很陌生VueJS，Webpack所以我需要一些帮助。

我已经安装VueJS并Webpack通过控制台使用命令

vue init webpack my-project

之后我在这个目录中安装了bulma CSS 框架。和

npm install bulma

我已经覆盖了bulmavariables.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>

但我收到一个错误：

./src/components/shared/TopNavigation.vue 中的错误

模块构建失败：背景颜色：$blue；
未定义的变量：“$blue”。

我搜索了一段时间并尝试将文件直接导入到我的webpack utils.js文件中，如下所示：

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

现在我没有收到错误，并且我TopNavigation使用了正确的蓝色。但现在bulma-variable不要被覆盖。

我希望你们能理解我的问题，并且有人可以帮助我解决这个问题。

4

2 回答 2

0

我不认为你可以使用 scss，因为 bulma 使用 sass。只需将您的TopNavigation.vue样式更改为：

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

我认为这应该可以解决问题。

于 2017-03-28T23:20:55.347 回答
-1

如果你和我一样是新手，最好不要被 Webpack 之类的东西淹没。

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

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

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

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

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

于 2017-05-25T07:50:15.877 回答