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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

145818 Jul 9,2019 01:56 PM UTC Jul 10,2019 06:57 AM UTC Vue 2
loading
Tags: Button
envision
Asked On July 9, 2019 01:56 PM UTC

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 

envision
Replied On 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.

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On 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. 
  
Regards, 
Vinoth Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon