I am having difficulties using the scss nesting syntax.
_table.scss
table { &.table { width: 100%; } }I included my _table.scss file into main.scss and then imported main.scss into main.js
main.scss
main.js
This is a list of package.json dependencies
{
"name": "morphzing-vue3",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint --ext .js,.vue src --ignore-path .gitignore .",
"lintfix": "eslint --ext .js,.vue src --ignore-path .gitignore . --fix"
},
"dependencies": {
"@kyvg/vue3-notification": "^2.7.0",
"@vuelidate/core": "^2.0.0",
"@vuelidate/validators": "^2.0.0",
"pinia": "^2.0.23",
"vue": "^3.2.45",
"vue-router": "^4.1.5",
"vuetify": "^3.0.1"
},
"devDependencies": {
"@mdi/js": "^7.0.96",
"@rushstack/eslint-patch": "^1.1.4",
"@vitejs/plugin-vue": "^3.1.2",
"@vue/eslint-config-prettier": "^7.0.0",
"eslint": "^8.22.0",
"eslint-plugin-vue": "^9.3.0",
"prettier": "^2.7.1",
"sass": "^1.56.1",
"vite": "^3.1.8"
}
}
Here is my vite.config.js file
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
port: 8080,
hot: true
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
scss: {
additionalData: `
@import "./src/assets/variables.scss";
@import "./src/assets/theme/colors.scss";
`
}
}
}
})
I followed the vite API reference
When I use simple syntax like .block .block__item or scss syntax in vue components, it works perfectly:
Simple syntax used in my _table.scss file
table td {
vertical-align: middle;
}
scss syntax used in vue components
<style lang="scss" module>
.block:global(.v-navigation-drawer--is-hovering) {
.block__logo {
padding: 24px;
}
.block__nav--nested {
padding: 0;
padding-left: 12px;
}
}
.block:not(:global(.v-navigation-drawer--is-hovering)) {
.block__nav {
padding: 0;
}
}
</style>
I also attempted to use sass-loader but unfortunately, it did not work in my case :(