SCSS files aren't applied to components after upgrading to NS 8

[dotnetdreamer]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 8.0.2
• Cross-platform modules: 8.0.7
• Android Runtime: 8.0.0
• iOS Runtime: 8.0.0
• NativeScript-Angular: 12.0.0
• Angular: 12.0.0

Describe the bug

I upgraded my app to NS 8 and NG 12 and now my components styles aren't loading/applied. However changes from my app.scss files are working. Components styles were working in my NS 7 Project.

Additional context
Here is my package.json

{
  "dependencies": {
    "@angular/animations": "~12.0.0",
    "@angular/common": "~12.0.0",
    "@angular/compiler": "~12.0.0",
    "@angular/core": "~12.0.0",
    "@angular/forms": "~12.0.0",
    "@angular/platform-browser": "~12.0.0",
    "@angular/platform-browser-dynamic": "~12.0.0",
    "@angular/router": "~12.0.0",
    "@nativescript-community/ui-pager": "^13.0.10",
    "@nativescript/angular": "~12.0.0",
    "@nativescript/core": "~8.0.0",
    "@nativescript/local-notifications": "^5.0.3",
    "@nativescript/theme": "^3.0.1",
    "@nstudio/nativescript-cardview": "^2.0.1",
    "@nstudio/nativescript-floatingactionbutton": "^3.0.4",
    "@pscoped/ngx-pub-sub": "^3.0.2",
    "moment": "^2.29.1",
    "nativescript-ngx-fonticon": "^7.0.0",
    "nativescript-permissions": "^1.3.11",
    "nativescript-ripple": "^4.0.1",
    "nativescript-sqlite": "^2.6.6",
    "nativescript-ui-sidedrawer": "^9.0.3",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.6.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~12.0.0",
    "@nativescript/android": "8.0.0",
    "@nativescript/ios": "8.0.0",
    "@nativescript/types": "8.0.0",
    "@nativescript/webpack": "beta",
    "@ngtools/webpack": "~12.0.0",
    "typescript": "~4.2.0"
  }
}

and here is my webpack.config.js file

const webpack = require("@nativescript/webpack");

module.exports = (env) => {
  webpack.init(env);

  webpack.Utils.addCopyRule('**/*.json');

  webpack.chainWebpack(config => {
    config.module
      .rule('scss')
      .use('sass-loader')
      .options({ sassOptions: { indentedSyntax: false } })
  });

  return webpack.resolveConfig();
};

My component

@Component({
    selector: 'page-vehicle-add',
    templateUrl: './vehicle-add.html',
    styleUrls: ['./vehicle-add.scss'],
    encapsulation: ViewEncapsulation.None
})
export class VehicleAddComponent implements OnInit {
...
}

The Template

<GridLayout rows="auto,auto,auto,auto,*" columns="*" class="page-vehicle-add custom-form">
...
</GridLayout>

The SCSS file code which isn't working/loading

.page-vehicle-add {
    padding: 20;
    border-width: 10;

    .categories {
        horizontal-align: center;
        border-width: 5;

        Button {
            width: 200;
            margin: 0;
            border-width: 1;
        }
    }
}

[edusperoni]

Hey @dotnetdreamer!

I think this issue is related to webpack and should be fixed shortly. To confirm, can you set this in your webpack.config.js and try again?

    webpack.chainWebpack((config, env) => {
        config.module
            .rule('scss')
            .include
            .add(path.join(webpack.Utils.platform.getEntryDirPath(), 'app.scss'))
            .add(path.join(webpack.Utils.platform.getEntryDirPath(), 'app.android.scss'))
            .add(path.join(webpack.Utils.platform.getEntryDirPath(), 'app.ios.scss'));
        config.module
            .rule('scss|component')
            .test(/\.scss$/)
            .exclude
            .add(path.join(webpack.Utils.platform.getEntryDirPath(), 'app.scss'))
            .add(path.join(webpack.Utils.platform.getEntryDirPath(), 'app.android.scss'))
            .add(path.join(webpack.Utils.platform.getEntryDirPath(), 'app.ios.scss'));
    });

[dotnetdreamer]

@edusperoni yes! its working now

[edusperoni]

@dotnetdreamer Thanks! I'll let you know here when we release a fix so you can remove that snippet from your code