我对这个世界还很陌生VueJS
,Webpack
所以我需要一些帮助。
我已经安装VueJS
并Webpack
通过控制台使用命令
vue init webpack my-project
之后我在这个目录中安装了bulma CSS 框架。和
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>
但我收到一个错误:
./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
不要被覆盖。
我希望你们能理解我的问题,并且有人可以帮助我解决这个问题。