Question

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

我已使用命令

通过控制台安装了VueJS和Webpack

vue init webpack my-project

之后我在这个目录中安装了bulma CSS Framework。与

npm install bulma

我在 variables.scss 中覆盖了一些bulma个变量。如果我在 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
中的
错误
模块构建失败：       background-color：$ blue;
        未定义的变量：“$ blue”。

我已经搜索了一段时间，并尝试直接在我的webpack utils.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网站下载bulma.css。

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

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

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

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

在每个Vue组件中使用CSS Framework和自己的变量

2 个答案: