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";`,
},
},
},
});
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 creating a library that wraps Vuetify 3 components. But when I try to use the library it gives the following error:
[Vue warn]: Failed to resolve component: v-btn If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Library vite.config.ts :
import { fileURLToPath, URL } from 'node:url';
import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import vue from '#vitejs/plugin-vue';
import vueJsx from '#vitejs/plugin-vue-jsx';
import vuetify from 'vite-plugin-vuetify';
export default defineConfig({
plugins: [
vue(),
vueJsx(),
// vuetify({ autoImport: true, styles: 'none' }), // Don't export vuetify
],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url)),
},
},
build: {
lib: {
entry: resolve(__dirname, 'src/main.ts'),
name: '#my/ui',
// the proper extensions will be added
fileName: 'my-ui',
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['vue', 'vuetify'],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: 'Vue',
vuetify: 'Vuetify',
},
},
},
},
});
Nuxt project nuxt.config.ts:
import { defineNuxtConfig } from 'nuxt';
import vuetify from 'vite-plugin-vuetify';
export default defineNuxtConfig({
css: ['#/assets/css/main.css'],
modules: [
async (options, nuxt) => {
nuxt.hooks.hook('vite:extendConfig', (config) =>
config.plugins.push(vuetify({ autoImport: true }))
);
},
],
build: {
transpile: ['#my/ui', 'vuetify'],
},
});
Nuxt project app.vue:
<template>
<v-app>
<v-main>
<HelloWorld label="Test" primary />
</v-main>
</v-app>
</template>
<script lang="ts" setup>
import { HelloWorld } from '#my/ui';
</script>
Nuxt project plugin vuetify.ts:
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
export default defineNuxtPlugin((nuxtApp) => {
const vuetify = createVuetify({
// components, if imported components getting resolved but treeshaking doesn't work.
// directives
});
nuxtApp.vueApp.use(vuetify);
});
Expected Behavior
Vuetify components from the Library project should be auto imported.
Current workaround:
If the vuetify components are imported in the parent project then the components are resolved. But this causes issue as the library users has to know what to import or import on global which is creating larger bundle size.
Is there an alternative way to implement and meet the following criteria:
Wrapping module doesn't depend on vuetify (Peer dep only)
Consuming app can auto import and get all of the benefits of tree shaking
Consuming app doesn't need to import any of the peer dependencies of the wrapping module.
Thank you so much in advance.
Just to create an answer for the workaround Sasank described:
If you just want to get rid of the error, import the components into the parent project as described in this link: https://next.vuetifyjs.com/en/features/treeshaking/#manual-imports
I am writing code by Vue3 and Typescript, and this is the code of App.vue, which is the root component:
<template>
<router-view v-if="inited" />
<div v-else>
Initing...
</div>
</template>
<script lang="ts">
import router from './router';
import { defineComponent } from 'vue';
import { useStore } from 'vuex';
import { key } from './store';
const store = useStore(key);
export default defineComponent({
data() {
return { inited: store.state.inited };
},
});
</script>
But the eslint tell me:
/home/peter/proj/skogkatt-next/src/App.vue
17:9 error Parsing error: '}' expected
I use many time on Google and so on, but still cannot find a useful solution. This is the config of eslint in package.json:
{
// ...
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"parser": "#typescript-eslint/parser",
"plugins": [
"#typescript-eslint"
],
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended",
"#vue/typescript",
"plugin:#typescript-eslint/eslint-recommended",
"plugin:#typescript-eslint/recommended"
],
"parserOptions": {
"parser": "#typescript-eslint/parser"
},
"rules": {
"#typescript-eslint/camelcase": "off"
}
},
// ...
}
I am not sure which config is useful or not, so I post those out. Thanks.
The error is caused by "plugin:#typescript-eslint/recommended", which sets the top-level parser, which collides with Vue's vue-eslint-parser. In addition, your own config duplicates the top-level parser setting already set in the plugin, and should also be removed.
Vue's ESLint config for TypeScript projects addresses this problem, so consider copying it:
module.exports = {
plugins: ['#typescript-eslint'],
// Prerequisite `eslint-plugin-vue`, being extended, sets
// root property `parser` to `'vue-eslint-parser'`, which, for code parsing,
// in turn delegates to the parser, specified in `parserOptions.parser`:
// https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error
parserOptions: {
parser: require.resolve('#typescript-eslint/parser'),
extraFileExtensions: ['.vue'],
ecmaFeatures: {
jsx: true
}
},
extends: [
'plugin:#typescript-eslint/eslint-recommended'
],
overrides: [{
files: ['*.ts', '*.tsx'],
rules: {
// The core 'no-unused-vars' rules (in the eslint:recommeded ruleset)
// does not work with type definitions
'no-unused-vars': 'off',
}
}]
}
Another option is to generate a TypeScript project with Vue CLI, and copying the resulting ESLint config.
I think it should be:
import { router } from './router';
Check if you have eslintConfig specified in both package.json and separate eslint config file. Both of these conflict and give this inconsistent state.
Its best to remove eslintConfig from package.json and move those to eslint config file.
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"`,
},
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