Question 237963 in CSS Question posted in
Some basic documentation can be found here.

Css – How to set up Angular project to be able to use mixins?

I have an Angular 16 project with this scss files:

styles.scss

@import url(./assets/scss/mixins.scss);
@import url(./assets/scss/elements.scss);

assets/scss/mixins.scss

@mixin no-text-selection {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

assets/scss/elements.scss

@import './mixins.scss';

input[type='checkbox'] {
  cursor: pointer;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;

  + label {
    cursor: pointer;
    @include no-text-selection;
  }
}

Looks like it should be working, but Edge/Chrome/Firefox gives an "Unknown property name":

Edge

The project was initially set to use css files, so perhaps there’s something missing?
I’m simply doing ng serve to run the web-app.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    We need to:

    1. Not add style files in assets folder (duh).

    Those files will be copied as is and we don't want that.

    1. Reference separate style files in angular.json:
    "build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/angularapp",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "inlineStyleLanguage": "scss",
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],
    "styles": [ /* Here! */
      "src/styles.scss",
      "src/styles/mixins.scss",
      "src/styles/global.scss",
      "src/styles/elements.scss",
      "src/styles/icons.scss",
      "src/styles/layout.scss",
    ],
    "scripts": []
  },
    1. Import mixins at the top of the file:
    @import './mixins.scss';

...

input[type='checkbox'] {
  cursor: pointer;

  + label {
    @include no-text-selection;
    cursor: pointer;
  }
}

    @use doesn't work for some reason.


  2. 0

    the initial setup to use css, needs a specific way to be migrated using scss, read this https://medium.com/motf-creations/migrate-from-css-to-scss-stylesheets-for-existing-angular-application-d61f8061f5b7 and check if everything is as described in the article! cheers!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search