grand-parent-loader

replace ^& to blockName

Install

npm i grand-parent-loader

Initialization

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'css-loader', 
                    'sass-loader', //or less-loader               
                	'grand-parent-loader'              
                ]
            },
        ]
    }
}

Example

.select {
  border: 1px solid silver;

  &__item {
    width: 10px;
    background-color: white;
  }
  
  &_dark {
      border: 1px solid red;
      
      ^&__item {
          background-color: black;
      }
                
  }
  
}

^& - will be replaced to grand-parent blockName - .select

result will be

.select {
  border: 1px solid silver;

  &__item {
    width: 10px;
    background-color: white;
  }
  
  &_dark {
      border: 1px solid red;
      
      .select__item {
          background-color: black;
      }
                
  }
  
}

Author

webster6667