I can’t use scss
nesting syntax.
_table.scss
table { &.table { width: 100%; } }
results in dev tools
I imported my _table.scss
file into main.scss
and main.scss
into main.js
main.scss
main.js
Here is my package.json dependencies
JavaScript
x
32
32
1
{
2
"name": "morphzing-vue3",
3
"version": "0.0.0",
4
"scripts": {
5
"dev": "vite",
6
"build": "vite build",
7
"preview": "vite preview",
8
"lint": "eslint --ext .js,.vue src --ignore-path .gitignore .",
9
"lintfix": "eslint --ext .js,.vue src --ignore-path .gitignore . --fix"
10
},
11
"dependencies": {
12
"@kyvg/vue3-notification": "^2.7.0",
13
"@vuelidate/core": "^2.0.0",
14
"@vuelidate/validators": "^2.0.0",
15
"pinia": "^2.0.23",
16
"vue": "^3.2.45",
17
"vue-router": "^4.1.5",
18
"vuetify": "^3.0.1"
19
},
20
"devDependencies": {
21
"@mdi/js": "^7.0.96",
22
"@rushstack/eslint-patch": "^1.1.4",
23
"@vitejs/plugin-vue": "^3.1.2",
24
"@vue/eslint-config-prettier": "^7.0.0",
25
"eslint": "^8.22.0",
26
"eslint-plugin-vue": "^9.3.0",
27
"prettier": "^2.7.1",
28
"sass": "^1.56.1",
29
"vite": "^3.1.8"
30
}
31
}
32
And my vite.config.js
JavaScript
1
29
29
1
import { fileURLToPath, URL } from 'node:url'
2
3
import { defineConfig } from 'vite'
4
import vue from '@vitejs/plugin-vue'
5
6
// https://vitejs.dev/config/
7
export default defineConfig({
8
plugins: [vue()],
9
server: {
10
port: 8080,
11
hot: true
12
},
13
resolve: {
14
alias: {
15
'@': fileURLToPath(new URL('./src', import.meta.url))
16
}
17
},
18
css: {
19
preprocessorOptions: {
20
scss: {
21
additionalData: `
22
@import "./src/assets/variables.scss";
23
@import "./src/assets/theme/colors.scss";
24
`
25
}
26
}
27
}
28
})
29
I followed the vite API
If I use simple syntax .block .block__item or use scss syntax in vue components – it works fine:
Simple syntax in my _table.scss file
JavaScript
1
7
1
table td {
2
vertical-align: middle;
3
overflow: hidden;
4
white-space: nowrap;
5
text-overflow: ellipsis;
6
}
7
vue components
JavaScript
1
22
22
1
<style lang="scss" module>
2
.block:global(.v-navigation-drawer--is-hovering) {
3
.block__logo {
4
padding: 24px;
5
}
6
.block__nav--nested {
7
padding: 0;
8
padding-left: 12px;
9
}
10
}
11
.block:not(:global(.v-navigation-drawer--is-hovering)) {
12
.block__nav {
13
padding: 0;
14
15
&--nested {
16
padding: 0;
17
padding-left: 4px;
18
}
19
}
20
}
21
</style>
22
Also I tried use sass-loader, It’s not working in my case(
Advertisement
Answer
My colleagues found a solution. We had to remove import through url in main.scss
Now my code in main.scss looks like this
JavaScript
1
7
1
@import './parts/_table.scss';
2
3
@import './typography.scss';
4
@import './helpers.scss';
5
6
@import './variables.scss';
7
@import './theme/colors.scss';
And nesting syntax from scss is working