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
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.
Can someone help with setting up Heroicons in combination with Nuxt 3?
I ran the following command:
yarn add #heroicons/vue
I also added #heroicons/vue as following to my nuxt.config.js:
build: {
transpile: ["#headlessui/vue", "#heroicons/vue"],
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
But I can't seem to make it work at all.
Could you tell me what I have to do?
Tailwindcss and Nuxt
first you should ,install tailwind package:
npm install -D tailwindcss postcss autoprefixer
then generate tailwind cona fig file:
npx tailwindcss init
Add Tailwind to your PostCSS configuration
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
})
then inside your tailwind.config.js Configure your template paths:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
"./components/**/*.{js,vue,ts}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./pages/index.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
"./app.vue",
],
theme: {
extend: {},
},
plugins: [],
}
! if you set srcDir correct the paths
then add the Tailwind directives to your CSS:
add main.css file to your assets with this content:
Add main.css the CSS file globally
main.css file:
#tailwind base;
#tailwind components;
#tailwind utilities;
nuxt.config.js
css: ['~/assets/css/main.css'],
finally you can use tailwind.
final nuxt.config.js file :
export default defineNuxtConfig({
css: ["#/assets/styles/main.scss"],
postcss: {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
},
},
})
Heroicons and Nuxt
First, you should install Heroicons package:
npm install #heroicons/vue
then you can use it like this:
<template>
<BeakerIcon class="h-6 w-6 text-blue-500" />
</template>
<script lang="ts" setup>
import { BeakerIcon } from "#heroicons/vue/24/solid";
</script>
The 24x24 outline icons can be imported from #heroicons/vue/24/outline, the 24x24 solid icons can be imported from #heroicons/vue/24/solid, and the 20x20 solid icons can be imported from #heroicons/vue/20/solid.
learn more here: https://github.com/tailwindlabs/heroicons#vue
but try nuxt-icon library :)
Here is how you should set up a nuxt.config.js file together with tailwindcss and nuxt-icon library:
export default defineNuxtConfig({
modules: ['nuxt-icon'],
css: ['~/assets/css/main.css'], // css file with #tailwind base etc.
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
})
Like I wrote in comment, nuxt-icon contains all Heroicons together with 100k + more.
Here is the way you can use this icon library: https://stackoverflow.com/a/73810640/6310260
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
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