webpack - Nativescript 6 angular如何将SCSS文件动态加载到页面中

Question

我有一个项目，我正在努力像以前使用 Webpack、Nativescript 5.x 和 SASS 一样进行工作。

在 {N} 6 出现之前，SASS 插件将 .scss 文件编译成 .css 文件以及它们的 scss 对应文件。

我正在使用此功能根据在 ngAfterViewInit() 中调用的以下函数将特定于设备大小的 css 动态加载到我的页面中。

现在因为 {N}6 使用 sass-loader 而不是 nativscript-dev-sass 没有创建 css 文件，所以我所有的 css 规则都进入了 bundle.js，我不知道如何获取我需要应用的 CSS这页纸。

基本上 this.page.addCssFile() 已经没用了。

有谁知道如何访问 bundle.js 中的原始 css，或者如何配置我的 webpack 构建以发出 css 文件？

基本上我只想为 /app/styles/ 中的 .scss 文件生成 .css 文件，将它们包含在我的构建中，然后像在下面的函数中那样调用它们。

欢迎提出其他实现我目标的方法的建议。我曾尝试使用 mini-css-extract-plugin 创建 css 文件，但我对 Webpack 不是很熟悉。

constructor(protected page: Page, protected  routerExtensions : RouterExtensions ){

...

private setupScreenSize(){
  let screen = platform.screen.mainScreen;
  let orient  = orientation.getOrientation();
  console.log(orient);
  console.log(screen.heightDIPs);
  console.log(screen.widthDIPs);


  console.log("Current directory: " + __dirname)

  if( screen.widthDIPs <= 320 || screen.heightDIPs <= 320){
    console.log("small screen");
    this.screenSize = "screen-small"
    this.page.addCssFile("~/styles/device-small.css")
  } else if ( screen.widthDIPs <= 480 || screen.heightDIPs <= 480)  {
    console.log("medium screen");
    this.screenSize = "screen-medium"
    this.page.addCssFile("~/styles/device-medium.css")
  } else if ( screen.widthDIPs <= 600 || screen.heightDIPs <= 600)  {
    console.log("large screen");
    this.screenSize = "screen-large"
    this.page.addCssFile("~/styles/device-large.css")
  } else {
    console.log("extra large screen");
    this.screenSize = "screen-xlarge"
    this.page.addCssFile("~/styles/device-extra-large.css")
  }

  ...
}

标签： webpacknativescriptnativescript-angularsass-loader