i am currently trying to acces vuetify variables inside my scss files. And i am using nuxt.
This is part of my nuxt.config.js
...
buildModules: [
'#nuxtjs/eslint-module',
'#nuxtjs/stylelint-module',
'#nuxtjs/vuetify',
['#nuxtjs/dotenv', { filename: '.env.' + process.env.NODE_ENV }]
],
...
vuetify: {
customVariables: ['~/assets/variables.scss'],
treeShake: true
},
And then i have a component importing an scss file like so. And in this file i try to use: var(--v-anchor-base)
<style lang="scss" scoped>
#import './NavigationDrawer.scss';
</style>
I guess it is because the scope scss file "dosen't know" of the vars from vuetify.
But how can i change it so i can use vuetify vars inside a scoped component?
Another point is that the documentation is missing for nuxt
https://vuetifyjs.com/en/customization/sass-variables/#nuxt-install
Related
I am having problems displaying a static image located at src/assets/images/logo.png folder with the v-img Vuetify component.
<v-img src="#/assets/images/rima_logo.png"></v-img>
It doesn't load with Vuetify, but using a plain img tag it does find the resource. Also vscode provides completion for the image relative path so I don't know why vuetify isn't loading it correctly.
You code looks no problem, on condition that you have configured the path alias in your vue.config.js:
module.exports = {
...
chainWebpack: (config) => {
config.resolve.alias
.set('assets', resolve('src/assets'));
},
};
There some other solutions which should also works:
use required
<v-img :src="require(#/assets/images/rima_logo.png)"></v-img>
Import image as a resource:
// template
<v-img :src="rimaLogo"></v-img>
// scripts
import rimaLogo from 'assets/images/rima_logo.png';
It works on <img> due to the vue compiler feature transformAssetUrls. Vuetify's vite plugin has a preset for this to support vuetify components:
// vite.config.js
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
export default {
plugins: [
vue({
template: { transformAssetUrls }
}),
vuetify(),
],
}
https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin#image-loading
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.
The vuetify documentation only provides example for injecting sass variables using vue-cli configuration in vue.config.js
https://vuetifyjs.com/en/customization/sass-variables#markup-js-vue-config-sass-variables
What is the correct way to provide the modified vuetify variables when not using the CLI?
I am upgrading an older project from v1 (stylus) to v2 (sass) and I need to override some variables, lets say I only need to change the font-family to Arial.
I am also using treeshaking with vuetify.
Now I am kind of stuck because I don't know where to import the style overrides... Importing these in src/main.ts obviously does not work.
I have created a minimal repro here: https://github.com/Sharsie/vuetify-theme-repro/
What I have so far is a webpack config in build directory and style overrides in src/styles/main.scss
$body-font-family: Arial;
#import "~vuetify/src/styles/styles.sass";
Running the project creates a simple page that prints out computed styles for the v-app container
<v-app id="app">
<v-container>
<v-content>
<p>Wanted font-family: Arial</p>
<p>Current font-family: {{ fontFamily }}</p>
</v-content>
</v-container>
</v-app>
After digging through the source code of vue-cli, I figured out that the config just gets passed to sass-loader options, so the solution was pretty straightforward:
Instead of providing the stylesheet with variables through vue.config.js as such:
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "~#/styles/main.scss"`,
},
},
},
}
You can provide it directly to sass-loader options in webpack config like this:
module.exports = {
...
module: {
rules: [
...
{
test: /\.(s?c|sa)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: sass,
sassOptions: {
fiber: fibers,
},
prependData: `#import "~/styles/main.scss"`,
},
},
],
}
...
]
}
...
}
or for sass-loader<8.0.0
options: {
implementation: sass,
fiber: fibers,
data: `#import "~/styles/main.scss"`,
},
Following various vue cli example to successfully implement scss file into the vue file, the page now loads with css imported but I cannot inspect from which file / line number the css declaration comes from, all it says in chrome console is within the not from the actual file like "margin.scss line 40".
here is my vue.config.js
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: ["#/src/css/index.scss"]
}
},
here is my App.vue
<template>
<div >
</div>
</template>
<style lang="scss" >
#import "./css/index.scss";
</style>
and here is what I see,
Activate sourcemaps:
module.exports = {
css: {
sourceMap: true,
},
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: ["#/src/css/index.scss"]
}
},
https://cli.vuejs.org/config/#css-sourcemap
When using Webpack is pretty straight forward to add an alias for scss files in a Vue SFC, e.g:
<style lang="scss">
#import "~scss/config/config";
...
</style>
Would be the following in Webpack:
alias: {
sass: path.resolve(__dirname, '../scss/')
}
How would you add the same kind of alias in Rollup via rollup-plugin-vue?
I've tried adding a number of postcss plugins, e.g
import importer from 'postcss-import';
vue({
css: false,
style: {
postcssPlugins: [
importer({
path: null,
addModulesDirectories: [path.resolve(__dirname, '../shared')]
})
]
}
}),
I've also tried: rollup-plugin-alias, rollup-plugin-includepaths and some other postcss plugins.
I don't think you can use postcss plugins within the Vue plugin to accomplish this, because it compiles the scss before it gets passed to postcss.
Using rollup-vue-plugin I've been able to use style.preprocessOptions.scss.includePaths to alias directories, in my case pointing to node_modules:
//rollup.config.js
import VuePlugin from 'rollup-plugin-vue'
...
plugins: [
VuePlugin({
style: {
preprocessOptions: {
scss: {
includePaths: ['node_modules'],
}
}
})
]
...
// some .vue file
<style>
#import 'some-node-module' //resolves to 'node_modules/some-node-module'
</style