Trying to import Foundation breakpoint util into Vue-CLI to be available to every component but getting error:
SassError: (small: 0, medium: 640px, large: 1024px, xlarge: 1200px, xxlarge: 1440px) isn't a valid CSS value.
╷
36 │ $-zf-breakpoints-keys: map-to-list($breakpoints, 'keys');
│ ^^^^^^^^^^^^
╵
node_modules/foundation-sites/scss/util/_breakpoint.scss 36:36 #import
src/scss/_custom.scss 4:9
My setup looks like this:
vue.config.js:
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `#import "~#/scss/_custom.scss";`
}
}
},
}
_custom.scss:
#import '~foundation-sites/scss/util/breakpoint';
main.js:
import Vue from 'vue'
import App from './App.vue'
import "./components";
import './scss/app.scss';
new Vue({
render: h => h(App),
}).$mount('#app')
app.scss:
#import '~foundation-sites/scss/util/util';
#import 'global';
#import '~foundation-sites/scss/foundation';
My colleague managed to solve this.
In the project root folder created a file called .sassrc:
{
"includePaths": [ "node_modules" ]
}
Removed #import '~foundation-sites/scss/util/breakpoint'; from _custom.scss.
Changed vue.config.js to this (importing the whole foundation lib):
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
#import "~#/scss/_custom.scss";
#import 'foundation-sites/scss/foundation';
`
}
}
}
}
And now breakpoints util can be used within each Vue component with scoped css.
Related
I'm currently building a VueJS 3 application using Vite and Bootstrap 5.2
I want to use reakpoint mixins in some of my components but I cannot manage to do it without having to import bootstrap .scss file in all of them.
I'd like to import it just once and be capable of using all bootstrap functions/mixins throughout the whole code.
This is what I have already tried (none of them worked for me):
1. Add `bootstrap` file import to `css > preProcessors > scss > additionalData` `vite.config.js` settings:
// vite.config.js
import { defineConfig } from 'vite'
import vue from '#vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
server: {
port: 8080
},
resolve: {
alias: {
'#': path.resolve(__dirname, './src'),
find: '#vue/runtime-core',
replacement: '#vue/runtime-core/dist/runtime-core.esm-bundler.js',
'~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
}
},
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: `#import "~bootstrap/scss/bootstrap";`
}
}
}
})
Create a ./src/assets/styles.scss file, import bootstrap in it and add it to css > preProcessors > scss > additionalData vite.config.js settings:
// vite.config.js (rest of settings equal to the one above)
css: {
preprocessorOptions: {
scss: {
additionalData: `#import "./src/assets/styles.scss";`
}
}
}
./src/assets/styles.scss
#import "~bootstrap/scss/bootstrap";
Import the same ./src/assets/styles.scss file within main.js file
Import bootstrap file within main.js
Along with that I have a question: if I do the only thing that worked which is importing the bootstrap file on every Vue component I want: will it affect performance since (as far as I understand) bootstrap will be fully imported all of the times?
I'm more than happy to share any additional details of the project in order to try to get some answers.
I am stuck at this problem and would like some help. I tried searching for a similar issue, though couldn't find a proper solution. The problem is pretty simple: my components cannot access my variables.scss file unless I import it directly - that way I need to so in every single component of my project... there must be another way.
This is the structure of my project so far: I created a global.scss file that imports my variables.scss file here and global.scss is imported in App.vue here
The issue is fixed if every component has the specific import of the variables file:
here
There must be a smoother way.
Hope someone can help me fix this issue!
If you use webpack, you can use an additionalData option of the sass loader to automatically import your variables in each component
https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `#import "#/assets/styles/variables.sass"`
}
}
}
};
const { defineConfig } = require("#vue/cli-service");
module.exports = defineConfig({
lintOnSave: false,
css: {
loaderOptions: {
sass: {
implementation: require("sass"),
additionalData: `#import "~#/assets/scss/_variables.scss";`,
},
},
},
});
At the root of my project I added vue.config.js with:
const path = require('path');
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [path.resolve(__dirname, './../node_modules/foundation-sites/dist/scss/foundation.scss')]
}
}
};
It did not seem to load it (when I make errors in the code it doesn't complain).
So I decided to put it in App.vue:
<script>
// Components
import AppHeader from '#/components/AppHeader.vue'
import AppFooter from '#/components/AppFooter.vue'
// Mocks
import jPrices from '../data/jprices.staging.mock.js'
export default {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: ['./../node_modules/foundation-sites/dist/scss/foundation.scss']
}
},
components: {
AppHeader,
AppFooter
},
data () {
return {
jPrices
}
}
}
</script>
I still get this error:
SassError: Undefined variable: "$medium-gray".
on line 24 of /usr/src/j/src/App.vue
>> border: 1px solid $medium-gray;
But it is in the foundation sass file.
Also if I give the wrong path I don't get a wrong path error.
E.g. (wrong path):
'./../node_modules/foundation-sites/dist/scss/foundation.s'
I also tried (in App.vue):
import './../node_modules/foundation-sites/scss/foundation.scss'
import './../node_modules/foundation-sites/scss/_global.scss'
How do I get it to load Foundation scss file?
vue.js version 3
Zurb Foundation version 6
Node version 15
When adding base/global styles in Vue, is it best practice to require them in my main.js?
import Vue from 'vue';
import App from './App.vue';
import store from './store/';
require('./assets/scss/main.scss');
Vue.config.productionTip = false;
new Vue({
store,
render: h => h(App)
}).$mount('#app')
Or is it better to import them in my App.vue?
<style lang="scss">
#import 'src/assets/scss/main.scss';
</style>
There's no difference importing in App.vue or in main.js, just do not forget that the style tag in App.vue must not have the attribute scoped or the import will not work, I personally prefer to do inside the main.js, but with vue-cli 3 IMHO this approach is much better:
vue.config.js
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// pass options to sass-loader
sass: {
// #/ is an alias to src/
// so this assumes you have a file named `src/variables.scss`
data: `#import "#/variables.scss";`
}
}
}
}
PS: Do not forget that in vue, when importing modules, you can use the alias # that maps into the /src folder of files.
In a project of mine I have this import in main.js
import '#/assets/scss/index.scss';
For more information: https://cli.vuejs.org/guide/css.html
I'm trying to set up a Vue project using vue-cli 3.x, typescript, pug and .sass files.
I also want to import a couple files globally so that they are available in all my components (I followed this guide)
main.ts
import Vue from 'vue'
import App from './App.vue'
import router from '#/router'
import store from '#/store'
import './registerServiceWorker'
import '#/sass/main.sass'
main.sass
#import partials/variables
#import ../../node_modules/globl.css/main
vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
#import "#/sass/partials/_variables.sass";
#import "./node_modules/globl.css/partials/_mixins.sass";
`
}
}
}
}
Navbar component giving me errors
<template lang="pug">
.navbar Navbar
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
</script>
<style lang="sass">
.navbar
color: red
</style>
Error log
I noticed that if I remove the sass from the component and convert it to scss the error goes away...
The other issue, in the main.sass file, is still a mystery to me..