We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Vue CLI3 Webpack Config for SCSS Imports - Top-level selectors may not contain the parent selector

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 

2 Replies

EN envision July 9, 2019 02:53 PM UTC

Actually, I just verified this problem was because of Lerna monorepository management package.

I ended up taking Lerna off from this codebase, but it seems it has created some hidden symlinks or so in relation to these packages, and Vue's default Webpack @ alias config is probably adding up to the mix.

When I moved this subproject folder outside of the monorepo, nuked node_modules and yarn.lock, and reinstalled, SCSS got built fine.

VK Vinoth Kumar Sundara Moorthy Syncfusion Team July 10, 2019 06:57 AM UTC

Hi Janne, 
We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on Syncfusion components. 
Vinoth Kumar S 

Live Chat Icon For mobile
Up arrow icon