![](/img/trans.png)
[英]How to use bootstrap 4 in vue.js 2 without bootstrap-vue?
[英]Use custom SCSS with Bootstrap-Vue + Webpack + Vue.js
我正在使用VueJS和Bootstrap-Vue創建一個應用程序。 我試圖導入SCSS文件以覆蓋Bootstrap變量以及另一個自定義樣式的SCSS。
這是我到目前為止:
npm install node-sass sass-loader css-loader --save-dev
{ test:/\\.(s*)css$/, use:['style-loader','css-loader', 'sass-loader']}
main.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'
import router from './router'
import fontawesome from '@fortawesome/fontawesome'
import light from '@fortawesome/fontawesome-pro-light'
Vue.use(BootstrapVue)
Vue.config.productionTip = false
fontawesome.library.add(light)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
<style lang="scss">
@import './assets/scss/app.scss';
</style>
當我運行npm run dev
我收到以下錯誤:
ERROR Failed to compile with 1 errors 21:05:54
error in ./src/main.js
Syntax Error: Unexpected token, expected ; (29:7)
27 | })
28 |
> 29 | <style lang="scss">
| ^
30 | @import './assets/scss/app.scss';
31 | </style>
32 |
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
fontawesome.library.add(light)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
<style lang="scss">
@import './assets/scss/app.scss';
</style>
我不確定為什么它不起作用。 我在Github和Stack Overflow上嘗試了各種解決方案。
任何幫助,將不勝感激。
你不能在這樣的javascript中編寫樣式標記。 您需要將其移動到vue
文件並將加載器附加到它,或使用標准導入:
import './assets/scss/app.scss';
沒有style
標簽或@
符號。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.