I have been working on an application using VueJS with Bootstrap-Vue and I encountered a challenge while trying to import a SCSS file to customize the Bootstrap variables and add some custom styles.
Here are the steps I have taken so far:
- Installed node-sass, sass-loader, and css-loader by running
npm install node-sass sass-loader css-loader --save-dev- Added the following configuration to build/webpack.base.conf.js
{ test:/\.(s*)css$/, use:['style-loader','css-loader', 'sass-loader']}- Created a SCSS file located in src/assets/scss/app.scss
In my main.js file, I imported various dependencies and added the following code snippet:
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>
However, when I run npm run dev, I encounter the following error:
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>
I have searched for solutions on Github and Stack Overflow but haven't been able to resolve the issue. Any assistance would be highly appreciated.