i would like to use bootstrap vue with my own scss file for theming.
Unfortunately I always get a strange error:
ERROR Failed to compile with 1 error
error in ./node_modules/bootstrap-vue/src/index.scss
Syntax Error: SyntaxError
(1:1) Unknown word
> 1 | // --- BootstrapVue Custom SCSS ---
| ^
2 |
3 | // Requires at least the Bootstrap functions, variables and
# ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./src/assets/custom.scss 4:40-286
# ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css&
# ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=css&
# ./src/App.vue?vue&type=style&index=0&lang=css&
# ./src/App.vue
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.1.20:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
For the structure I followed exactly the docs
My custom.scss File:
$theme-colors: (
"primary": #51ff00,
"danger": #ff4136
);
#import '../../node_modules/bootstrap/scss/bootstrap.scss';
#import '../../node_modules/bootstrap-vue/src/index.scss';
and the main.js File:
// ***** Bootstrap Vue *****
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import './assets/custom.scss'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
I'm using the recommended Versions of
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.21.2",
"sass": "^1.32.13",
"sass-loader": "^10.2.0"
What could be the problem here?
Solution:
I accidentally imported my custom.scss file into my app.vue additionally
<style>
#import 'assets/custom.scss';
</style>
Related
I'm trying to include Bootstrap-Vue in my (fresh) Vue-Project. I've used the Bootstrap-Vue Vue CLI 3 plugin (vue add bootstrap-vue). Starting the app with npm run serve results in the following error:
Failed to compile.
./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
29 │ -webkit-tap-highlight-color: rgba($black, 0); // 5
│ ^^^^^^
╵
node_modules/bootstrap/scss/_reboot.scss 29:37 #import
src/assets/scss/vendors/bootstrap-vue/index.scss 4:9 #import
src/App.vue 20:9 root stylesheet
My main.js looks like this:
import Vue from 'vue'
import './plugins/bootstrap-vue'
import App from './App.vue'
import './assets/app.scss'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
bootstrap-vue.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
app.scss
$body-bg: #000;
$body-color: #111;
#import 'node_modules/bootstrap/scss/bootstrap.scss';
#import 'node_modules/bootstrap-vue/src/index.scss';
I'm pretty sure it has to do with importing some file, but I can't figure it out. I'm using Vue-Version 2.6.11.
I've managed to solve the issue: when including bootstrap-vue via vue add bootstrap-vue, you will be asked three questions:
Use babel/polyfill? → Yes
Use scss? → Yes
Would you like to inject vars, functions and mixins in all SFC components? → If you answer "No" here, it will lead to the described error. Choose "Yes".
The last step that needs to be taken to make Bootstrap work properly, is importing the styles. You can do this by adding the following to your main.js:
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
I'm trying to bind background images dynamically but there seems to be trouble compiling the assets. What's weird is that it works but no at the same time.
I've tried various solutions from SO and nothing get rids of the compilation error (which still compile based on the image above):
Vue.js dynamic images not working
VueJS v-bind:style for background-image: url()
Vue.js data-bind style backgroundImage not working
reference assets with generated style data bind
Vue dynamic background image inline component
How The Project is Set Up
Laravel Sanctum as the backend, Vue SPA for the frontend and utilising Axios for communications.
Topic.vue Component
<div
v-for="topic in topics"
:key="topic.id"
class="col-12 col-sm-6 col-lg-3 mb-4 d-flex justify-content-center"
>
<div
class="card-topic d-flex align-items-end"
:style="inlineBgImage(topic.src)"
>
<div class="card-topic__button py-3 text-center w-100">
<a href class="card-topic__link">{{ topic.title }}</a>
</div>
</div>
</div>
Script in Topic.vue
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState('topic', ['topics']),
},
created() {
this.$store.dispatch('topic/fetchTopics')
},
methods: {
inlineBgImage(src) {
let bgImage = require('#/assets' + src)
return {
backgroundImage: `url("${bgImage}")`,
}
},
},
}
</script>
In the inlineBgImage(src) methods, the background-image is successfully applied if the require is hardcoded i.e. let bgImage = require('#/assets/img/topic/myself.jpg'). Once I used the src value, it broked but still works(Failed to compile. page appear)
Assets
Below is the asset folder structure
All SCSS files are imported to app.scss which are then imported to main.js
_variables.scss
The "undefined variable" does exist
app.scss
This is how I import the _variable.scss file in app.scss; #import 'variables.scss';. The import comes first before other files.
I've also tried:
#import 'variables';
#import '_variables';
#import '_variables.scss';
It still gives out errors.
Error Details in Terminal
I want to reiterate that these errors does not appear if I hardcode the bgImage e.g. require('#/assets/img/topic/myself.jpg'). I don't understand how these changes affect the compiler.
ERROR Failed to compile with 6 errors 12:37:58 PM
error in ./src/assets/scss/card.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
16 │ background-color: $dark-blue;
│ ^^^^^^^^^^
╵
src\assets\scss\card.scss 16:23 root stylesheet
# ./src/assets/scss/card.scss 4:14-233 14:3-18:5 15:22-241
# ./src sync ^\.\/assets.*$
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/search.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
27 │ color: $blue;
│ ^^^^^
╵
src\assets\scss\search.scss 27:12 root stylesheet
# ./src/assets/scss/search.scss 4:14-235 14:3-18:5 15:22-243
# ./src sync ^\.\/assets.*$
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/image.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
33 │ color: $white;
│ ^^^^^^
╵
src\assets\scss\image.scss 33:12 root stylesheet
# ./src/assets/scss/image.scss 4:14-234 14:3-18:5 15:22-242
# ./src sync ^\.\/assets.*$
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/button.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
2 │ color: $light-blue;
│ ^^^^^^^^^^^
╵
src\assets\scss\button.scss 2:12 root stylesheet
# ./src/assets/scss/button.scss 4:14-235 14:3-18:5 15:22-243
# ./src sync ^\.\/assets.*$
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/header.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
4 │ background-color: $dark-blue;
│ ^^^^^^^^^^
╵
src\assets\scss\header.scss 4:23 root stylesheet
# ./src/assets/scss/header.scss 4:14-235 14:3-18:5 15:22-243
# ./src sync ^\.\/assets.*$
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
error in ./src/assets/scss/nav.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
6 │ color: $light-blue;
│ ^^^^^^^^^^^
╵
src\assets\scss\nav.scss 6:12 root stylesheet
# ./src/assets/scss/nav.scss 4:14-232 14:3-18:5 15:22-240
# ./src sync ^\.\/assets.*$
# ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue?vue&type=script&lang=js&
# ./src/views/Topic.vue
# ./src/router/index.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.100.14:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
Other Details
The topic.src from v-for="topic in topics" will yield a String, for e.g. /img/topic/myself.jpg.
inlineBgImage(src) {
let fileExt = src.substring(src.lastIndexOf('.'))
src = src.replace('/img/', '')
src = src.replace(fileExt, '')
let bgImage = require('#/assets/img/' + src + fileExt)
return {
backgroundImage: `url("${bgImage}")`,
}
}
Kudos to skirtle for giving a solution at forum.vuejs.org. As skirtle mentioned, Webpack handles expression and fixed string parameter differently. I did change the solution a bit in case future files have different file extension. You see skirtle original answer and explanation there.
In my current project I tried to import and include vuetify-dialog. When I include it, my run process crashed. So this is how my main.js looks like
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import vuetify from './vuetify'
import router from './router/index'
import Default from './layouts/Default.vue'
import NoSidebar from './layouts/NoSidebar.vue'
import VueFilterDateFormat from '#vuejs-community/vue-filter-date-format'
import VuetifyDialog from 'vuetify-dialog'
import 'vuetify-dialog/dist/vuetify-dialog.css'
Vue.use(VuetifyDialog, {
context: {
vuetify
}
})
Vue.use(VueFilterDateFormat)
Vue.component('default-layout', Default)
Vue.component('nosidebar-layout', NoSidebar)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
vuetify,
router,
render: h => h(App)
}).$mount('#app')
My package.json looks like this:
"dependencies": {
"#mdi/font": "^5.5.55",
"#vuejs-community/vue-filter-date-format": "^1.6.1",
"axios": "^0.19.2",
"deepmerge": "^4.2.2",
"fibers": "^5.0.0",
"sass": "^1.26.10",
"sass-loader": "^9.0.3",
"vue": "^2.6.11",
"vue-password-strength-meter": "^1.7.2",
"vue-router": "^3.0.1",
"vuetify": "^2.3.9",
"vuetify-dialog": "^2.0.10",
"zxcvbn": "^4.4.2"
},
When I try to run yarn dev I get these errors:
error in ./node_modules/vuetify/lib/components/VCalendar/VCalendarDaily.js
Module parse failed: Unexpected token (25:8)
You may need an appropriate loader to handle this file type.
| return {
| 'v-calendar-daily': true,
| ...this.themeClasses
| };
| }
# ./node_modules/vuetify/lib/components/VCalendar/index.js 2:0-46
# ./node_modules/vuetify/lib/components/index.js
# ./node_modules/vuetify/lib/index.js
# ./node_modules/vuetify-dialog/dist/vuetify-dialog.esm.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
error in ./node_modules/vuetify/lib/mixins/colorable/index.js
Module parse failed: Unexpected token (26:23)
You may need an appropriate loader to handle this file type.
|
| if (isCssColor(color)) {
| data.style = { ...data.style,
| 'background-color': `${color}`,
| 'border-color': `${color}`
# ./node_modules/vuetify/lib/components/VTabs/VTabsSlider.js 2:0-47
# ./node_modules/vuetify/lib/components/VTabs/index.js
# ./node_modules/vuetify/lib/components/index.js
# ./node_modules/vuetify/lib/index.js
# ./node_modules/vuetify-dialog/dist/vuetify-dialog.esm.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
error in ./node_modules/vuetify/lib/components/VSystemBar/VSystemBar.js
Module parse failed: Unexpected token (26:8)
You may need an appropriate loader to handle this file type.
| 'v-system-bar--fixed': !this.absolute && (this.app || this.fixed),
| 'v-system-bar--window': this.window,
| ...this.themeClasses
| };
| },
# ./node_modules/vuetify/lib/components/VSystemBar/index.js 1:0-38
# ./node_modules/vuetify/lib/components/index.js
# ./node_modules/vuetify/lib/index.js
# ./node_modules/vuetify-dialog/dist/vuetify-dialog.esm.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
error in ./node_modules/vuetify/lib/components/VTabs/VTab.js
Module parse failed: Unexpected token (26:8)
You may need an appropriate loader to handle this file type.
| return {
| 'v-tab': true,
| ...Routable.options.computed.classes.call(this),
| 'v-tab--disabled': this.disabled,
| ...this.groupClasses
# ./node_modules/vuetify/lib/components/VTabs/index.js 2:0-26
# ./node_modules/vuetify/lib/components/index.js
# ./node_modules/vuetify/lib/index.js
# ./node_modules/vuetify-dialog/dist/vuetify-dialog.esm.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
My hole terminal is full of it.
When I remove vuetify-dialog from my main file everything works.
What did I miss here?
I've created a Nuxt app with Bulma included and would like to access/override the Bulma variables in my .vue files. I've followed the instructions here which seem to match what I found in several other locations but I'm still getting an error when trying to access the $primary variable in my .vue file.
Here's my assets/css/main.scss file:
#import "~bulma/sass/utilities/_all.sass";
#import "~bulma/bulma";
My nuxt.config.js modules section:
modules: [
['nuxt-sass-resources-loader', './assets/css/main.scss']
],
And my .vue file:
<template>
<section class="container">
<div class="my-title">
About
</div>
</section>
</template>
<script>
export default {
};
</script>
<style lang="scss">
.my-title {
color: $primary;
}
</style>
Here's the error message in the terminal:
Module build failed (from ./node_modules/sass-loader/lib/loader.js): friendly-errors 11:51:52
color: $primary;
^
Undefined variable: "$primary".
in /Data/dev/GIT/Homepage/source/pages/about/index.vue (line 16, column 12)
friendly-errors 11:51:52
# ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./pages/about/index.vue?vue&type=style&index=0&lang=scss& 4:14-384 14:3-18:5 15:22-392
# ./pages/about/index.vue?vue&type=style&index=0&lang=scss&
# ./pages/about/index.vue
# ./.nuxt/router.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
Can anyone see what I'm doing wrong?
UPDATE: I've narrowed it down to the nuxt.config.js modules setup by importing the .scss directly in the .vue file. This works which tell me the imports in the main.scss the file is working fine.
Okay, I wasn't able to get it working with nuxt-sass-resources-loader but I did get it working with style-resources-module from here https://github.com/nuxt-community/style-resources-module. Once I installed style-resources-module, I just added it to my nuxt.config.js modules section and added the appropriate styleResources section as follows:
modules: [
'#nuxtjs/style-resources'
],
styleResources: {
scss: [
'./assets/css/main.scss'
]
},
This config options provides to load any scss/sass file that specified by you before other files via webpack. You can interfere webpack config via these options that provide by nuxt. To experience more sass loader configuration you can check webpack sass loader section.
Don't forget install node-sass and sass-loader to use sass/scss file
in your app as mentioned by nuxt documentation.
// nuxt.config.js
build: {
loaders: {
sass: {
prependData: "#import '~bulma/sass/utilities/_all.sass;",
}
}
}
Using a stylus block level import:
# vuetify-style.styl
.myapp
#import '~vuetify/src/stylus/main'
This is to ensure that the vuetify css doesn't interfere with elements from other parts of the page which aren't using vuetify.
But unfortunately it doesn't work, I can't compile it.
ERROR Failed to compile with 1 errors 2:13:28 pm
error in ./src/stylus/main.styl
Module build failed (from ./node_modules/stylus-loader/index.js):
Error: node_modules/vuetify/src/stylus/settings/_el
evations.styl:85:33
81| 0px 9px 46px 8px $shadow-key-ambient-opacity
82|
83| // MIXINS
84| elevation($z, important = false)
85| box-shadow: $shadow-key-umbra[$z],
---------------------------------------^
86| $shadow-key-penumbra[$z],
87| $shadow-key-ambient[$z] (important ? !important : )
88|
cannot perform $shadow-key-umbra[((0))]
It compiles only when I delete the first line (.myapp)
Link to the issue on github: https://github.com/vuetifyjs/vuetify/issues/4864
BTW I also tried to use less and import css from the package
# vuetify-style.less
vuetify-styles {
#import (less) 'vuetify/dist/vuetify.css';
}
But in this way I also got an error:
ERROR Failed to compile with 1 errors 11:57:30 AM
error in ./src/plugins/vuetify-styles.less
Module build failed:
// load the styles
var content = require("!!../../node_modules/css-loader/index.js??ref--9-1!../../node_modules/p
ostcss-loader/lib/index.js??ref--9-2!../../node_modules/less-loader/dist/cjs.js??ref--9-3!./vu
etify-styles.less");
^
Unrecognised input
in /Users/zvadym/WorkProjects/motos_as/odin/vue/src/plugins/vuetify-styles.less (line 4,
column 12)
# ./src/plugins/vuetify-styles.less 4:14-334 13:3-17:5 14:22-342
# ./src/plugins/vuetify.js
# ./src/crm/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/crm/ma
in.js
Found a way to deal with it. Actually I just specified the full relative path to the style file
.vuetify-styles {
#import (less) '../../node_modules/vuetify/dist/vuetify.css';
}
and installed less of course npm install -D less less-loader