I have a Vue CLI3 initiated codebase, with this vue.config.js:
const path = require('path');
module.exports = {
configureWebpack: {
devtool: 'source-map',
resolve: {
alias: {
'@': path.join(__dirname, '/src')
}
}
},
css: {
loaderOptions: {
sass: {
data: `@import "@/assets/styles/vars/_all.scss";`,
includePaths: [
path.resolve(__dirname, 'node_modules/@syncfusion')
]
}
}
}
};
Using these imports in my SCSS file:
@import "ej2-base/styles/bootstrap4.scss";
@import "ej2-icons/styles/bootstrap4.scss";
@import "ej2-buttons/styles/bootstrap4.scss";
Is it possible you are having incorrect SCSS syntax when internally adding imports to other packages?
Importing ej2-base and ej2-icons works, but adding ej2-buttons import breaks the build with this error:
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
&.e-bigger .e-switch-wrapper,
^
Top-level selectors may not contain the parent selector "&".
╷
219 │ ┌ &.e-bigger .e-switch-wrapper,
220 │ │ &.e-bigger.e-switch-wrapper,
221 │ │ &.e-bigger .e-css.e-switch-wrapper,
222 │ │ &.e-bigger.e-css.e-switch-wrapper {
│ └────────────────────────────────────^
╵
node_modules/@syncfusion/ej2-buttons/styles/switch/_layout.scss 219:3 @content
node_modules/@syncfusion/ej2-base/styles/common/_mixin.scss 7:5 export-module()
node_modules/@syncfusion/ej2-buttons/styles/switch/_layout.scss 1:2 @import
node_modules/@syncfusion/ej2-buttons/styles/switch/_all.scss 1:10 @import
node_modules/@syncfusion/ej2-buttons/styles/switch/bootstrap4.scss 3:9 @import
node_modules/@syncfusion/ej2-buttons/styles/bootstrap4.scss 4:9 @import
stdin 81:9
Using node-sass
