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

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

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

我使用此功能基于动态加载特定于设备大小的css到我的页面中，并在ngAfterViewInit（）中调用以下函数

现在由于{N}6使用sass加载程序而不是nativscript dev sass，因此没有创建任何css文件，因此我的所有css规则都进入bundle.js，我不知道如何获得将其应用于页面所需的css

基本上，这个.page.addCssFile（）已变得无用

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

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

欢迎提出实现我目标的其他方法的建议。 我曾尝试使用迷你css提取插件来创建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")
  }

  ...
}

构造函数（受保护的页面：页面，受保护的routerExtensions:routerExtensions）{
...
私有设置屏幕大小（）{
让屏幕=platform.screen.mainScreen；
让orient=orientation.getOrientation（）；
控制台日志（东方）；
控制台日志（屏幕高度下降）；
控制台。日志（屏幕。宽度下降）；
log（“当前目录：”+\uuu dirname）
如果（screen.widthDIPs使用SASS loader插件来包含这些文件。很高兴知道这个选项，但并不能满足我的需要。我有不同的样式表需要在运行时应用。设备大样式、设备中样式、设备小样式。我知道如何将它们包含到bundle.js中。每个样式表都有不同的填充值、字体大小和大小tc针对不同的屏幕宽度进行了定制。我不明白为什么它无法实现。如果我正确理解这里的问题，即没有将样式绑定到应用程序中，这应该可以解决问题，并且您可以在运行时加载CSS文件？我可能不太清楚。我在应用程序/样式中有scss文件，例如device-large.scss、device-medium.scss，与{N}5的工作方式不同的是，它会在将scss文件复制到应用程序之前将其编译为css文件。当webpack运行并将其作为文件访问时，您会看到它们列在发出的文件列表中。现在{N}6已经改变了这一点，并且没有生成或复制到应用程序中的.css文件。我不知道如何从bundle.js访问样式以在运行时应用它们。这证实了我的假设是正确的。使用bundle工作流，不会生成单独的css/js文件，所有文件都将被捆绑到两个文件中。它将包括se是必需的（由require语句或与XML文件名同名）。在您的代码中，您没有require语句，也没有与任何XML文件名相同的名称，因此webpack不会知道它必须包含这些SCSS文件。如上所述调整webpack配置将解决此问题。使用SASS loader插件包含这些文件。很高兴了解此选项，但无法实现我需要的功能。我已经我需要在运行时应用不同的样式表。设备大样式、设备中样式、设备小样式。我知道如何将它们包含到bundle.js中。每个样式表都有不同的填充值、字体大小等值，可根据不同的屏幕宽度进行自定义。我不明白为什么它无法实现。如果我正确理解这里的问题，哪些是样式没有捆绑到应用程序中，这应该可以解决问题，您可以在运行时加载CSS文件吗？我可能不是很清楚。我在app/样式中有scss文件，如device-large.scss、device-medium.scss，它们与{N}方式不同5成功了，它将把scss文件编译成css文件，然后再复制到应用程序中。当webpack运行时，你会看到它们列在发出的文件列表中，并将它们作为文件访问。现在{N}6已经改变了这一点，并且没有生成或复制到应用程序中的.css文件。我不知道如何从bundle.js访问样式以在运行时应用它们。这证实了我的假设是正确的。使用bundle工作流，不会生成单独的css/js文件，所有文件都将被捆绑到两个文件中。它将包括se是必需的（由require语句或与XML文件名同名）。在代码中，您没有require语句，也没有与任何XML文件名相同的名称，因此webpack不会知道它必须包含这些SCSS文件。如上所述调整webpack配置将解决此问题。