CODEWITHSUNDEEP
csswebpacksassnativescript
Arco Voltaico
Arco Voltaico

Reputation: 814

NativeScript 8 not compiling SCSS to CSS

In my project, I have two scss empty login component files.

If the component loads the CSS:

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

when I run ns run ios the compiler would throw a CSS not found error.

If I change it to SCSS

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

I don't have any errors but the login screen on the simulator is blank

If I comment the styleUrls line, the login screen would be rendered.

I think I should use the .css version, and probably add/remove some dependency and probably change some config files. Any idea?

My 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"

},

My 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();
};

Upvotes: 1

Views: 568

Answers (1)

bradrice
bradrice

Reputation: 1755

You need to run

npm i sass

That will install the sass interpreter.

And add a test to your webpack config

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

Upvotes: 0

Related Questions