NativeScript 8 未将 SCSS 编译为 CSS

Question

在我的项目中，我有两个scss空登录组件文件。

如果组件加载 CSS：

 styleUrls: ["./login-common.css", "./login.css"]

当我运行 ns run ios 时，编译器会抛出 CSS not found 错误。

如果我将其更改为 SCSS

styleUrls: ["./login-common.scss", "./login.scss"]

我没有任何错误，但模拟器上的登录屏幕是空白的

如果我注释 styleUrls 行，则会呈现登录屏幕。

我认为我应该使用 .css 版本，并且可能添加/删除一些依赖项并可能更改一些配置文件。有什么想法吗？

我的 package.json ：

"devDependencies": {
"@angular/compiler-cli": "~11.2.7",
"@nativescript/ios": "8.0.0",
"@nativescript/types": "~8.0.0",
"@nativescript/webpack": "beta",
"@ngtools/webpack": "~11.2.6",
"sass-loader": "^12.1.0",
"typescript": "~4.0.0",
"webpack": "^5.49.0"

},

我的 webpack.config.js：

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

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

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

Answer 1

你需要跑

npm i sass

这将安装 sass 解释器。

并在你的 webpack 配置中添加一个测试

config.module
        .rule('scss')
        .test( /\.s[ac]ss$/i)
        .use(
              // Compiles Sass to CSS
              "sass-loader"
        )